0

div 要素内にメニュー リンクを均等に配置したい。左にフロートすると、右にスペースができます。jsfiddle の例私が使用している html は

<div id="header" class="nav"> 
<ul >
    <li>Home</li>
    <li>About</li>
    <li>Vision</li>
    <li>Clients</li>
    <li>Partners</li>
</ul>
</div>

cssが

#header {
position: relative;
width: 60%;
height: 40px;
margin: 0px auto;
font-size: 25px;
margin-top: 20px;
padding-top: 15px;
border-radius: 5px; 
background-color: black  ;
}

.nav ul
{
list-style: none;
padding: 10px 10px 0px 1px;
margin:  0;
}

.nav ul li
{
list-style: none;
float: left;
padding: 0 0 0 20px;
font-weight: normal;
}
4

6 に答える 6

2

1 つの方法はul{ display: table; table-layout:fixed; } li{ display: table-cell }.

これが更新された fiddleです。

注: IE の問題です。Internet Explorer の場合、バージョン 8 以降で動作します。

表示およびテーブル レイアウトプロパティの詳細。

于 2013-02-14T14:44:20.897 に答える
0

に使用する必要がありwidth: 20%ますliが、パディングを適用する予定がある場合は減らしてください。20px左側にパディングが必要な場合は、好みに合わせて幅を前後またはそれ以下に設定する必要があります17%。

PS: CSS Box Layout Rule: を常に覚えておいてくださいresult = target / offset。

于 2013-02-14T14:51:12.960 に答える
0

あなたはこれをやったのでスペースを残しました：

padding: 0 0 0 20px;

パディング: . . . .20px 平均

padding-left:20px;

これは、パディングの左側のピクセルを減らすと、次のようになります 。 Jsfiddle でプレビュー

于 2013-02-14T14:51:24.247 に答える
0

ミッシングリンク、更新されたフィドルです。.

<div id="header" class="nav"> 
<ul >
    <li ><a href="#">Home</a></li>
    <li ><a href="#">About</a></li>
    <li ><a href="#">Vision</a></li>
    <li ><a href="#">Clients</a></li>
    <li ><a href="#">Partners</a></li>
</ul>


</div> 



#header {
   position: relative;
   width: 90%;
   height: 40px;
   margin: 0px auto;
   font-size: 25px;
   margin-top: 20px;
   padding-top: 15px;
   border-radius: 5px; 
   background-color: black  ;
   color: white;
   }
.nav ul{
   list-style: none;
   margin:  0;
   display: table;
   table-layout: fixed;
   width: 100%;
   }

.nav ul li{
   list-style: none;
   padding: 0 10px;
   font-weight: normal;
   display:table-cell;
   text-align: center;
}

.nav li > a{
   display:block;
   color : white;   
   text-decoration : none;
}
于 2013-02-14T15:03:24.597 に答える