jquery - 固定幅のコンテナに合わせてタブのサイズを自動変更する方法は?

Question

これが以前に尋ねられた場合はお詫びしますが、CSS と JavaScript を使用して固定幅のコンテナーに合わせてサイズを均等に変更するタブ (通常の HTML の順序付けられていないリスト要素) を実装するにはどうすればよいでしょうか?

例: *Google Chrome、Firefox、Sublime Text など *

Answer 1

「タブ」の数がわかっている場合は、100をその数で割って、幅をそのパーセントに設定できます。すなわち：width:20%5つの要素のため。

でも...

jqueryを使用して要素の幅を動的に設定するように設定されている場合は、次の例を参照してください：http: //jsfiddle.net/eMLTB/3/

<div id="wrapper" class="clearfix">
<ul id="nav">
    <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>
    <li><a href="#">link 6</a></li>
</ul>
</div>

jquery

var n = $("#nav li").length;
var w = (100/n);
$("#nav li").width(w+'%');

css

#wrapper { width: 90%; background:#aaa; }
#nav { margin:0; padding:0;}
#nav li { float: left; list-style:none; margin:0;}
#nav li a { display: block; padding:5px; background: #ddd; margin-right:1px; }

Answer 2

CSSだけでこれを行うことができます：

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

li {
    display: table-cell;
}

table-layout: fixedここで最も価値のあるプロパティです。auto通常、このプロパティには、テーブルに適用されると、セルの内容に応じてセルのサイズを変更する属性があります。Fixed は、セルのサイズを変更し、コンテナーの幅の合計をセルの数で割った値と同じ幅にします。追加のボーナス: 計算が高速です。

jsフィドル

Answer 3

リストに「table-row」を表示し、リスト項目に幅1％の「table-cell」を表示します。