7

中央に配置する必要があるサイト ナビゲーションのリスト アイテムがあります。リスト項目にパディングを入れることができるようにフローティングしています...それらをインラインに設定すると、上下のパディングがなくなるようです。

<style type="text/css">

   #nav {
       width:100%;
   }

   #nav ul {
       margin-right: auto;
       margin-left: auto;
   }

   #nav ul li {
      float: left;
      background-color: #333;
      color: #fff;
      padding: 15px;
      margin: 10px;
   }

</style>

<div id='nav'>

   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
  </ul>

</div>
4

4 に答える 4

15

アイテムをインラインで表示することにより、それらをテキストとして整列させることができます。行の高さを設定すると、折り返しの問題が修正されました。

 #nav{
        text-align: center;
        line-height:30px;

    }

    #nav li {
        list-style:none;
        margin: 0 5px;
        display:inline;
        border:gray solid 1px;
    }

実際のデモはここで見ることができます: http://jsfiddle.net/AqRJA/1/

于 2014-04-01T15:12:12.250 に答える
2

CSS を次のように変更してみてください。

#nav ul{

margin-right:auto;
margin-left:auto;
text-align:center;

}

#nav ul li{
display:inline;
background-color:#333;
color:#fff;
padding:15px;
margin:10px;

}

乾杯、

シンシア

于 2013-06-24T00:38:07.433 に答える
1

ulに幅を与える

クラスをこれに置き換えます

   #nav ul {
       margin-right: auto;
       margin-left: auto;
       width:400px;
   }
于 2013-06-24T05:27:11.193 に答える