10

私はcssを使用して要素を均等に分散することについて多くのことを読みましたが、私が見つけたすべてのソリューションでは、分散される要素の幅や数を知って定義する必要があります。

固定幅のコンテナがあります。ここには、親要素全体に左から右に均等に分散する必要がある自動幅のli要素をいくつでも含めることができます。

これが私のマークアップです。ただし、任意の長さのテキストを含むタブがいくつでも存在する可能性があります。

<ul class="tabs">
     <li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li>
     <li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li>
     <li class="tab " id="tab-3"><span class="tab-title">Tab 3</span></li>
     <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>

したがって、要素の数と幅が動的である場合のcssを使用した配布でも、実行できますか？

やりたいことは明らかなことのようです-くそーCSS！

4

2 に答える 2

17

このために、CSSdisplay:table-cellプロパティを使用できます。これを書いてください：

.tabs {
  display: table;
  width: 300px;
  border: 1px solid green;
}

.tabs li {
  display: table-cell;
  border: 1px solid red;
  height: 40px;
}

このJSFiddleを確認してください。

于 2012-05-11T12:34:39.550 に答える
6

フレックスボックスを使用して、コンテンツが割り当てられたセル幅をオーバーフローしたときに幅を均等に保つソリューションは次のとおりです。

ul.tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.tabs>li.tab {
  flex: 1;
  text-align: center;
  /* just adding visibility to the tabs */
  border: 1px solid rgba(0,0,0,.12); 
  padding: 10px;
}
<ul class="tabs">
     <li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li>
     <li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li>
     <li class="tab " id="tab-3"><span class="tab-title">Tab 3. This is a very long tab and should overflow...</span></li>
     <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>

于 2016-01-04T14:42:45.000 に答える