1

我正在尝试使导航栏水平，但目前它是垂直的。任何帮助都会很棒。问题在于它是垂直的。我已经在 html 中制作了列表，然后使用我在 css 中的其他文件对其进行了编辑。

HTML：

<html>
<head>
    <link rel="stylesheet" href="Style/style.css" type="text/css"/>
</head>
<body>
<div class="horizontal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Articles</a></li>
</ul>
</div>

</body>
<html>

CSS：

div.horizontal
{
width:100%;
height:63px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
float:left;
}
div.horizontal a
{
display:block;
width:86px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#7A991A;
}
4

3 回答 3

2

就个人而言，我总是用这样的 CSS 设置我的水平导航栏（使用你当前的 CSS 作为起点）：

div.horizontal li {
    width:86px;
    height:inherit;
    display:inline-block;

    /* Fix bug in IE7 and below */
    zoom:1;
    *display:inline;
}

div.horizontal li a {
    display:block;
    width:100%;
    height:100%;
}

将让它水平放置，并声明它的宽度/高度会inline-block为. 然后从容器继承高度/宽度。缺乏也消除了清除任何东西的需要。liaalifloat:left

编辑：更新以显示 IE7 及以下不尊重 inline-block 的解决方法；

于 2013-02-28T18:09:25.490 回答
0

尝试：

div.horizo​​ntal a { 显示：块；宽度：86px；向左飘浮; }

于 2013-02-28T18:10:08.780 回答
0

利用

display:inline-block;

您不能使用当前的水平方法，因为块在流中垂直定位。但是这个属性会覆盖流，并使其将自己视为内联/块混合体。

于 2013-10-11T08:16:09.313 回答