顶部和底部边框的 CSS 边框问题答案

【问题标题】：CSS border issue with top and bottom border顶部和底部边框的 CSS 边框问题
【发布时间】：2013-06-20 14:00:55
【问题描述】：

我在这里有这个网站http://jamessuske.com/freelance/paoladi/ 并且我在导航中应用了边框顶部和底部，因此我之间有两个边框。但是由于某种原因，两个边界都在顶部......我做错了什么？

.navigation{
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    text-transform:uppercase;
}

这个类的上面是一个头类，头类里面是一个logo类和socialMedia类，一个向左浮动，一个向右浮动。头类没有分配浮点数。

【问题讨论】：

只需将float: left 提供给.navigation 类，将clear: left 提供给.contentArea。

标签： css border

【解决方案1】：

将float: left 添加到.navigation 类

【讨论】：

【解决方案2】：

你所有的 li 元素都向左浮动。您需要在列表之后清除。

尝试添加

<div class="clearboth"></div>

在ul之后

【讨论】：

【解决方案3】：

有几种方法可以做到这一点。

选项 1。

尝试应用display:inline-block 和width:100%;

例如：

.navigation {
    border-bottom: 1px solid #000000;
    border-top: 1px solid #000000;
    display: inline-block;
    text-transform: uppercase;
    width: 100%;
}

WORKING SOLUTION

选项 2。

使用以像素为单位的固定height。

例如：

.navigation {
    border-bottom: 1px solid #000000;
    border-top: 1px solid #000000;
    height: 65px;
    text-transform: uppercase;
}

WORKING SOLUTION

希望这会有所帮助。

【讨论】：