2

これは html/css ナビゲーション バーです。ページの中央に配置するにはどうすればよいですか。html と float:center; にセンター タグを配置してみました。ulの下ではうまくいきませんが、htmlを投稿してからcssを投稿してください

HTML

<body>
<ul>
<li><a href="#">&nbsp;</a></li>
</ul>
</body>

CSS

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

6 に答える 6

2 
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
    padding-left:200px;

}
a:link,a:visited
{

display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

ここでデモ

于 2013-03-28T06:47:03.050 に答える
1

<ul>内側にaを入れて<div>中心にalign="center"

このような：

<div align="center">
<ul>
    <li>hhhh</li>
    <li>hhhhh</li>
</ul>
</div>
于 2013-03-28T06:41:21.813 に答える
1

以下を追加する必要があります。

margin: 0 auto;

ul 要素と a 要素の css に移動し、float: left; を削除します。リから。

ここでこのjsfiddleを参照してください

于 2013-03-28T06:41:33.027 に答える
1

あなたはあなたaの aを与えたので、width: 120pxなぜあなたの ul に同じプロパティを与えることができず、次を使用することはできませんmargin:

width: 120px;
margin: 0 auto;

デモ: http://jsfiddle.net/NYE3y/

于 2013-03-28T06:42:01.483 に答える
1

text-align: center を ul に追加し、float: left を display: inline-block に置き換えます

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
text-align:center; <<add this
}
li
{
display:inline-block; << add this instead of float
}

CSS の他の部分は変更されません。

したがって、Web サイトにさらに li を追加すると、それらはすべて中央に並んで配置されます。

<li><a href="#">&nbsp;</a></li>
<li><a href="#">&nbsp;</a></li>

空白を削除するには:

 <li><a href="#">&nbsp;</a></li><li><a href="#">&nbsp;</a></li>

各行の間にエンターを押さないでください。:)

...または追加する別の解決策があります: margin-left:-4px:

   li
    {
display:inline-block; 
margin-left: -4px;
    }
于 2013-03-28T06:53:58.947 に答える
0

UL用のラッパーを使用し、ラッパーに幅を適用します

<div class="menu-wrap">
    <ul>
        <li>Menu A</li>
    </ul>
</div>

CSS:

.menu-wrap {
    margin:0 auto;
    width:500px;
}

あなたはまだあなたのliにfloatを使うことができます。常にフロートをクリアすることを忘れないでください。

于 2013-03-28T07:15:49.047 に答える