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はliそれを水平に置くことができ、その幅/高さを宣言すると、 に適切なコンテナが作成されますa。次に、コンテナーaから高さ/幅を継承します。liの欠如は、float:left何かをクリアする必要も排除します。

編集：インラインブロックを尊重しないIE7以下の回避策を示すために更新されました。

于 2013-02-28T18:09:25.490 に答える
0

使用する

display:inline-block;

ブロックがフロー内で垂直に配置されるため、水平方向に現在の方法を使用することはできません。しかし、この属性はフローをオーバーライドし、それ自体をインライン/ブロック ハイブリッドとして認識させます。

于 2013-10-11T08:16:09.313 に答える
0

試す：

div.horizo​​ntal {display:block; 幅:86px; フロート: 左; }

于 2013-02-28T18:10:08.780 に答える