82

それで、私がデザインしている新しいウェブサイトで使用する水平リストを作成しようとしました. 「float」を左に設定するなど、すでにオンラインで見つかった多くの提案を試みましたが、問題の修正に関してはどれもうまくいきませんでした。

    ul#menuItems {
      background: none;
      height: 50px;
      width: 100px;
      margin: 0;
      padding: 0;
    }
    ul#menuItems li {
      display: inline;
      list-style: none;
      margin-left: auto;
      margin-right: auto;
      top: 0px;
      height: 50px;
    }
    ul#menuItems li a {
      font-family: Arial, Helvetica, sans-serif;
      text-decoration: none;
      font-weight: bolder;
      color: #000;
      height: 50px;
      width: auto;
      display: block;
      text-align: center;
      line-height: 50px;
    }
<ul id="menuItems">
  <li>
    <a href="index.php">Home</a>
  </li>
  <li>
    <a href="index.php">DJ Profiles</a>
  </li>
</ul>

現在、この問題の原因がわからないのですが、どうすれば解決できますか?

4

6 に答える 6

125

更新された回答

多くの人がこの回答を使用していることに気付いたので、少し更新することにしました。現在サポートされていないブラウザーのサポートは含まれていません。

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
}
<ul>
    <li> <a href="#">some item</a>

    </li>
    <li> <a href="#">another item</a>

    </li>
</ul>

于 2013-03-29T20:11:57.427 に答える
8

このフィドルは方法を示しています

http://jsfiddle.net/9th7X/

ul, li {
    display:inline
}

リストと css に関する優れたリファレンスは次のとおりです。

http://alistapart.com/article/taminglists/

于 2013-03-29T20:14:15.267 に答える
6

リストの最後でinline-blockを使用する必要がなくなるため、より良い方法は を使用することです。clear:both

これを試して：

<ul>
    <li>
        <a href="#">some item</a>
    </li>
    <li>
        <a href="#">another item</a>
    </li>
</ul>

CSS:

ul > li{
    display:inline-block;
}

ここでそれを見てください：http://jsfiddle.net/shahverdy/4N6Ap/

于 2013-03-29T20:14:08.603 に答える
3

フローティング要素を避けるためにインラインブロックを使用することもできます

<ul>
    <li>
        <a href="#">some item</a>
    </li>
    <li>
        <a href="#">another item</a>
   </li>
</ul>

次に、次のようにスタイルします。

li{
    /* with fix for IE */
    display:inline;
    display:inline-block;
    zoom:1;
    /*
    additional styles to make it look nice
    */
 }

そうすれば、何もフロートする必要がなくなり、クリアフィックスの必要がなくなります

于 2013-03-29T20:16:17.710 に答える
0

ここでは、リストの動的なサイズ変更に関するいくつかの提案とともに、実際の例を見つけることができます。

親リストのサイズを動的に変更できるように、display:inline-block とパーセンテージ パディングを使用しました。

display:inline-block;
padding:10px 1%;
width: 30%

さらに、最初と最後のアイテムのパディングを削除する 2 つのルールがあります。

ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}
于 2013-03-29T20:28:30.423 に答える