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

我在这里有这个网站http://jamessuske.com/freelance/paoladi/，我将边框顶部和底部应用于我的导航栏，所以我有两个边框。但由于某种原因，这两个边界处于顶端......我做错了什么？顶部和底部边框的CSS边框问题

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

这个类上面是一个标头类和头类内是一种标识类和社会化媒体类，一个漂浮左侧和右侧漂浮。头类没有分配浮点数。

来源

2013-06-20 user2499454

只是将'float：left'赋给'.navigation'类，将'clear：left'赋予'.contentArea'。 –

添加float: left到.navigation类

来源

2013-06-20 05:57:41

你的所有li元素的左侧浮动。您需要在清单后清除。

尝试增加

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

的UL

来源

2013-06-20 06:00:32 kcsoft

后有这样做的几种方法。

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

希望这有助于。

来源

2013-06-20 06:00:55 Nitesh

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

回答

相关问题