9

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;
}

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

4

1 に答える 1

30

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

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

必要なだけ li を追加できるようになり、ul は増え続けます。

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

  • これにより、水平スクロールバーが生成される可能性があり、ユーザーはそれを嫌います
  • 従来のブラウザーで機能させるには、追加の cssを追加する必要がある場合がありますinline-block
  • ul以下のフィドルの例に示すように、幅はその親の幅を超えません。はli実際には親をオーバーフローしています。特に問題はありませんが、ul.

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

于 2013-06-13T20:15:54.240 に答える