Question

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

在#toggles上删除：

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

Answer 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设置为容器高度，您可以确保子项将占据整个垂直空间，同时垂直对齐文本（如果您不关心垂直对齐，还可以设置{{1} }}）

在firefox / chrome中显示奇数填充/边距

2 个答案: