1

順序付けされていないlist（ul）要素（li）をコンテナーの幅まで拡大したいと思います。リストは自動的に生成されます。3、4、または10個の要素にすることができます。添付の画像で確認できる必要なもの：

ここに画像の説明を入力してください

HTMLおよびCSSコード：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Stretch list elements to full container width</title>
    <style type="text/css">
        #container{
            width:100%;
        }
        ul{
            height:20px;
            margin:0;
            padding:0;
            list-style:none;
            border:1px solid #000;
        }

        ul li{
            float:left;
        }

    </style>
</head>
<body>

    What I have:<br>

    <div id="container">
      <ul>
        <li style="background-color:red">element 1</li>
        <li style="background-color:green">element 2</li>
        <li style="background-color:blue">element 3</li>
      </ul>
    </div>

    <br><br>   
    What I need:
    <br>

     <div id="container">
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td style="background-color:red">element 1</td>
            <td style="background-color:green">element 2</td>
            <td style="background-color:blue">element 3</td>
        </tr>
      </table>
    </div>

</body>
</html>

このタスクはテーブルを使用して簡単に実装できます。しかし、unordered（ul）リストでそれを行う方法は？何か案は？

4

2 に答える 2

4

こちらをご覧くださいhttp://jsfiddle.net/38F9V/1/

$(document).ready(function(){
   var num = $('li').length;
   var width_li = 100/num;
   $('li').css('width',width_li+'%');
});

li要素の数を計算し、合計幅をその長さで割ってから、jqueryを使用して各li要素の幅を設定します

于 2012-05-28T12:42:22.930 に答える
2

あなたは試すことができます：ul li { float: left; width: 33.33%; }

于 2012-05-28T12:36:22.320 に答える