Question

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

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

这个类上面是一个标题类，标题类里面是一个logo类和socialMedia类，一个向左浮动，浮动向右。标题类没有指定浮点数。

Answer 1

将float: left添加到.navigation类

Answer 2

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

尝试添加

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

之后的

Answer 3

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

选项1。

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

For Instance：

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

WORKING SOLUTION

选项2。

使用固定的height像素。

For Instance：

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

WORKING SOLUTION

希望这有帮助。

带有顶部和底部边框的CSS边框问题

3 个答案: