css - 顶部和底部边框的 CSS 边框问题

Question

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

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

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

Answer 1

添加float: left到.navigation班级

Answer 2

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

尝试添加

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

在 ul 之后

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

工作解决方案

选项 2。

使用固定height的像素。

例如：

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

工作解决方案

希望这可以帮助。