web-dev-qa-db-ja.com

liが増加するとCSSはul幅を自動変更します（左にフローティング）

LIが真っ直ぐに浮くことができるULの幅を自動修正するのに問題があります。

Cssを変更する場合は、ULを'1000px'ではなく'auto'のような幅に設定します。私がやりたいことができるということです。

しかし、LIの数が増えるにつれてULの幅を自動変更したいので、CSSだけで同じ結果が得られる設定は他にありますか？.

    Now is like
    div ul-------------------------------div ul
            |   ///////      ////////       |
            |   /////// li   ///////  li    | 
            ---------------------------------
               ///////     ////////
               ////// li   ///////  li

   I want to be like this  
        div                                 div
          ul-------------------------------------------------------------ul
            |   ///////      ////////       |  ///////      ////////    |
            |   /////// li   ///////  li    | /////// li   ///////  li  |
            -------------------------------------------------------------

http://jsfiddle.net/KgyHZ/21/

HTML

<div class='test'>
    <ul>
        <li></li>
        <li></li> 
        <li></li>
        <li></li>
    </ul>
</div>

CSS

.test{
    width: 500px;
    height: 100px;
    overflow: hidden;
}
.test > ul{
    list-style:none;
    width: auto;
    height: 100%;
    background-color:#999;
    display: block;
    padding: 0px;
    margin: 0px;
}
.test > ul > li{
    float: left;
    display: block;
    height: 100%;
    width: 180px;   
    background-color:#99c;
    margin-right:10px;
}

アドバイスありがとうございます。

htmlcsswidthhtml-lists
7
Micah

これは、 'li'をフローティングではなくdisplayにinline-blockとして設定することで実現できます。次に、ulのwhite-spaceをnowrapに設定して、それらすべてを同じ行に強制する必要があります。このようなもの：

ul{
    list-style:none;
    white-space: nowrap;
}
ul > li{
    display: inline-block;
}

これで、必要な数のliを追加でき、ulは成長し続けます。

この手法を使用する際に考慮すべき点がいくつかあります。

  • これにより、水平スクロールバーが生成される可能性があり、ユーザーはそれらを嫌います
  • レガシーブラウザ でinline-blockを機能させるには、いくつかの extra css を追加する必要があるかもしれません。
  • ulの幅は、以下のフィドルの例に示されているように、親の幅を超えることはありません。 liは、実際には親から溢れています。実際には問題ではありませんが、ulの背景を操作するときは創造性が必要になる場合があります。

テクニックを示す簡単なフィドルの場合： http://jsfiddle.net/KgyHZ/213/

25
Pevara