0

私は、CSSが作成されたとき（つまり動的に生成されたHTML）に何個あるかを知らずに、CSSを使用して、同じ幅liの要素を1行に収めようとしています。ulli

W3Schoolsにはナビゲーションバーの例liがありますが、これは固定幅であり、それに合わせて別のスケーリングを追加すると、レイアウト全体が破棄されます。

これは彼らの例です：

CSS：

ul
{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
}
li
{
  float:left;
}
a:link,a:visited
{
  display:block;
  width:120px;
  font-weight:bold;
  color:#FFFFFF;
  background-color:#98bf21;
  text-align:center;
  padding:4px;
  text-decoration:none;
  text-transform:uppercase;
}
a:hover,a:active
{
  background-color:#7A991A;
}

HTML：

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

理想的には、私は別のものを追加することができ、liそれでもメニューは素晴らしい表示になります。

4

2 に答える 2

1

私がこのソリューションを嫌っているとしても...HTML/ CSSと自動更新幅だけで動作する必要がある場合は、テーブルでうまくいきます。

それ以外の場合は、単純なJSで幅を更新することをお勧めします。JSを介してオプションを追加する場合は、これを簡単に組み込むことができます。

編集：実際には、対象のブラウザによって異なります。使用することもできますが、display: tableIE8+に限定されています。

デモ

于 2012-08-14T14:26:58.693 に答える
0

あなたは私が推測するjavascriptでこれをしなければならないでしょう...

javascriptを使用して、ウィンドウの幅とリストアイテムの数を取得できます。これらがある場合は、javascriptを使用して固定幅を割り当てることができます。

于 2012-08-14T14:22:20.003 に答える