Firefox/chrome 中显示的奇数填充/边距答案

【问题标题】：odd padding/margin showing in firefox/chromeFirefox/chrome 中显示的奇数填充/边距
【发布时间】：2016-01-07 05:10:32
【问题描述】：

我正在尝试制作一个水平显示的列表，右侧边框为 1px，最后一个除外。出于某种原因，在 chrome 上，底部有一点边距，但在 Firefox 上没有显示。但是在 Firefox 上，右侧有一个边距（最后一个 li 元素），它不会在 chrome 上显示。关于它可能是什么的任何想法？老实说，我找不到它，我已经尝试修复它一段时间了..

body {
  font-family: "HelveticaNeue-Light", "Helvetica neue Light", sans-serif;
  padding: 0;
  margin: 0;
}
#menuBar {
  width: 100%;
  height: 40px;
  background-color: #e0e0e0;
  border-bottom: 1px solid grey;
}
#logo {
  padding: 5px 0 0 20px;
  font-weight: bold;
  font-size: 120%;
  float: left;
}
#buttonDiv {
  float: right;
  padding: 5px 10px 0 0;
}
#runButton {
  font-size: 120%;
}
#toggles {
  width: 256px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  height: 29px;
  border: 1px solid grey;
  position: relative;
  top: 5px;
}
#toggles li {
  float: left;
  border-right: 1px solid grey;
  padding: 5px 7px;
}
li:hover {
  background-color: blue;
}
.selected {
  background-color: green;
}

<body>

  <div id="wrapper">

    <div id="menuBar">

      <div id="logo">
        Website Visualizer
      </div>

      <div id="buttonDiv">

        <button id="runButton">Run Code</button>

      </div>

      <ul id="toggles">

        <li class="toggle selected">HTML</li>
        <li class="toggle ">CSS</li>
        <li class="toggle ">JavaScript</li>
        <li class="toggle selected" style="border:none">Result</li>

      </ul>

    </div>
  </div>

编辑：嘿伙计们，我修好了。所以基本上我从 UL 元素中删除了边框，只是在每个单独的 li 元素周围添加了一个边框。

【问题讨论】：

尝试将 *{ box-sizing:border-box; } 添加到您的 CSS。
在项目列表中尝试display: inline-block;。
将 box-sizing:border-box 添加到我的 li 元素中，它仍然是一样的。我也尝试了整个 ul div，但它也是一样的。 inline-block 也不起作用。
你的问题是因为 ul 的固定宽度！！！
@Legues 我的 ul 中的宽度为 256px，但不是吗？

标签： html css google-chrome firefox

【解决方案1】：

在您的#toggles 上移除：

#toggles {
    /*width: 256px;*/
    margin: 0 auto;
    list-style: none;
    padding: 0;
    height: 29px;
    border: 1px solid grey;
    position: relative;
    top: 5px;
}

【讨论】：

你的问题是因为固定的宽度。

【解决方案2】：

您需要将#toggles中的代码更改如下：

#toggles {
    /* width: 256px; */
    margin: 0 auto;
    list-style: none;
    padding: 0;
    height: 29px;
    border: 1px solid grey;
    position: relative;
    top: 5px;
}

通过移除容器上的宽度，您可以确保容器的宽度等于其所有子容器的宽度之和。

然后将#toggles li的定义更改如下：

#toggles li {
  float: left;
  border-right: 1px solid grey;
  padding: 0 7px;
  line-height: 29px;
}

通过将line-height设置为容器高度，可以确保子元素在垂直对齐文本的同时占据整个垂直空间（如果不关心垂直对齐，也可以设置height: 100%;）

【讨论】：