web-dev-qa-db-ja.com

CSSを使用して<li>を<ul>の幅に合わせます

<li>を<ul>の幅に合わせようとしていますが、width:autoを使用してもまったく機能せず、その理由もわかりません。 display:inline-blockを使用しようとしましたが、これは同じです。いくつのタブがあるかわかりませんので、パーセンテージを直接使用しないのはこのためです。

デスクトップにページを表示するときにリストをインラインで表示し、スマートフォン（メディアクエリを使用）にいるときに1行につき1つのliを表示したいと思います。

私はこれを持っています：

<ul id='menu'>
    <li class="button"><a class='current' href='http://'>Home</a></li>
    <li class="button"><a href='http://'>Products</a></li>
    <li class="button"><a href='http://'>Support</a></li>
    <li class="button"><a href='http://'>Contact</a></li>
    <li class="button"><a href='http://'>Contact</a></li>
</ul>

私のCSSは次のようになります：

ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
/*border-bottom:1px solid #000000;
border-top:1px solid #000000;*/
}

li.button {
background:transparent url(../images/nav_bg.png) repeat-x top left;
height:30px;
width:auto;
}



ul#menu li
{
display:inline-block;
margin:0;
padding:0;
width:auto;
}

ul#menu li a
{
display:inline-block;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
width:auto;
}

ul#menu li a:hover
{   
color:#FFFFFF;
height:22px;
background:transparent url(../images/nav_bg.png) 0px -30px no-repeat;       
}


ul#menu li a.current
{
display:inline-block;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;  
margin:0;
}
csslist
34
jbk

私は、未定義のli要素を均等に配置する必要がある単一行の全幅ulを処理するためにこの方法を見つけました。

ul {
  width: 100%;
  display: table;
  table-layout: fixed; /* optional */
}

ul li {
  display: table-cell;
  width: auto;
  text-align: center;
}

基本的に、テーブルをエミュレートします。 Gecko、Webkit、IE8 +で動作します。 IE7以降では、インラインブロックハッカーを使用する必要があります。

JSFiddle

84
Chionsas

Liカウントは変更される可能性があるため、あなたが提案したようにjavascript/jqueryでこれを達成することしか考えられません。 100をliの数で除算し、それぞれに幅を設定します。

var width = Math.floor(100 / $("ul#menu li").size());
$("ul#menu li").css('width', width + "%");

パディングとそうでないものに応じて、おそらく幅で遊ぶ必要があります。

補足として、まだお持ちでない場合は、 firebug のようなツールを入手することをお勧めします。これにより、cssを編集し、その場でjsを実行できます。外観の微調整に非常に役立ちます。

3
jello

<ul>の幅を5つの<li>sで埋めたい場合、それらの<li>sにそれぞれ20％の幅を与える必要があります。
この機能を使用するには、CSSの他の詳細を変更する必要があることに注意してください。例えばdisplay:inline-blockを使用すると、<li>カウントの間にスペースができるため、<ul>コンテンツの幅の合計は100％を超えます。 display:inline-blockを削除してfloat:leftを与えることをお勧めします。

編集：または、それらのコンテンツに応じて比例的に配布したいですか？それは別の課題です。

1
Mr Lister
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <style>
            body{
                margin:0 auto;
            }
            .main{
                width:650px;
                border:1px solid red;
                padding:5px;
            }
            ul {
            padding:0;
            margin:0;
            width: 100%;
            border-bottom: 0;
            }
            li{
                display: table-cell;
                width: 1%;
                float: none;
                border:1px solid green;
                margin:2px;
                padding:10px;
                text-align:center;
            }
        </style>
    </head>
    <body>
       <div class="main">
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
       </div>
    </body>
</html>
0
Nikit Barochiya