2

所以我有一个通过浮动无序列表的列表元素创建的水平导航栏。它工作正常，但在两个列表元素遇到两个边框的地方形成双倍的所需厚度。有没有办法解决这个问题？

尝试的一种解决方案： 我可以指定单个列表元素的左右边框属性，但这种方法似乎不是很有可扩展性，但它确实有效。

你可以在这里查看我的代码和演示http://jsfiddle.net/mscpg/ 或检查下面的代码

css

  #navigation_bar {
            overflow: hidden;
            list-style-type: none;
            width: 100%;
        }
            #navigation_bar li {
                text-align: center;
                float: left;
                width: 33%;
                border-style: solid;
                border-width: 1px;
                border-color: black;
            }

HTML

<ul id="navigation_bar">
    <li>Projection</li>
    <li>Real-Time</li>
    <li>Cleanup</li>
</ul>
4

6 回答 6

2

一种解决方案是：

#navigation_bar li {
    border: 1px solid black;
    border-left-width: 0;
}

#navigation_bar li:first-child {
    border-left-width: 1px;
}

现场演示：http: //jsfiddle.net/mscpg/3/

于 2012-10-02T21:01:23.950 回答
2

IMO，最简单的方法是将其添加到您的“#navigation_bar li”定义中，如果需要，只需在 ul 中添加 1px 边距以进行补偿：

margin-right: -1px;

如果它是一张表格，您将拥有方便的border-collapse 属性选项。

于 2012-10-02T21:02:53.110 回答
1

有许多可能的解决方案。例如：

#navigation_bar {
  overflow: hidden;
  list-style-type: none;
  width: 100%;
}
#navigation_bar li {
  text-align: center;
  float: left;
  width: 32%;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  border-left:none;
}
#navigation_bar li.first {    
  border-left:solid 1px black;
}
<ul id="navigation_bar">
  <li class="first">Projection</li>
  <li>Real-Time</li>
  <li>Cleanup</li>
</ul>

演示

另外 -这里是负边距​</p>

于 2012-10-02T21:04:31.623 回答
1

I think it would be a better idea to use display: inline-block instead of floating everything. For example:

 

 #navigation_bar {
        overflow: hidden;
        list-style-type: none;
        width: 100%;
    }
    #navigation_bar li {
        text-align: center;
        display: inline-block;
        width: 30%; /* Slightly smaller width to fix the borders */
        border-style: solid;
        border-width: 1px;
        border-color: black;
    }
于 2012-10-02T21:04:57.163 回答
1

我认为最简单的方法是给列表中的最后一个项目一个 id 或类，然后给它自己的边框

在 jsbin 上查看它的实际效果

于 2012-10-02T21:13:12.373 回答
0

您始终可以在 div 中包含列表项，然后将列表项的边框指定为所需查看大小的一半。然后，您可以将 div 包含在所需大小的一半的左右边框中。

于 2012-10-02T21:00:14.590 回答