CSS水平メニュー-等間隔？

StackOverflow https://stackoverflow.com/questions/1203910

  •  05-07-2019
  •  | 
  •  

質問

ULおよびLIタグで作成された標準のCSSメニューがあります。ページ全体を水平にカバーするためにそれらが必要です（実際のケースではありませんが、状況を簡素化するためにこれを使用します）。ただし、アイテムは動的に作成されるため、LIアイテムやマージンにハードコーディングすることはできません。

JavaScriptを使用してこれらの値を設定するソリューションを見てきましたが、本当に避けたいと思います。

最後に、設定しているかなり良い解決策を見ました

#menu {
    width: 100%;
    /* etc */
}
#menu ul {
    display: table;
}
#menu ul li {
    display: table-cell;
}

これにより、IEを除くほとんどのブラウザで目的の動作が作成されます。

アイデアはありますか

編集：回答ありがとうございます。ただし、アイテムを生成するコードは私のものではないため、後でJavaScriptを使用せずにアイテムを作成するときにインラインスタイルを設定することはできません。

役に立ちましたか？

解決

インライン要素の高さまたは幅を設定することはできません。 http://www.w3.org/TR/CSS2/visudet.html ＃inline-width

試してみるdisplay:inline-block;

ieの修正は次のとおりです。

display:inline-block;
zoom:1;
*display:inline;

他のヒント

要素に利用可能なスペース全体を取得させたい場合、メニュー要素の幅を事前に定義する必要はありません（もちろん、li要素のサイズを等しくするのに役立ちます）。この問題を解決するには、displayプロパティを操作します。

#menu{
  display: table;
  width: 100%;
}

#menu > ul {
  display: table-row;
  width: 100%;
}

#menu > ul >li {
  display: table-cell;
  width:1%
}

セルの崩壊を避けるため、width:1% が必要であることに注意してください。

メニュー項目が動的に生成されている場合（したがって、前にいくつあるかわからない場合）、style="width:xx"属性をli s（または上部の<style>内）に追加できます。 ..またはあなたが好きな場所、本当に）。ここで、xxはwidth_of_parent_div_in_px/number_of_elements+'px'または100/number_of_elements+'%'のいずれかである必要があります。 block sもfloatレベルの要素であり、left ed <=>である必要があります。

#menu ul li {
    float: left;
    clear: none;
    display: inline;
    padding: 10px;
    height: 25px; //how tall you want them to be
    width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}

幅：18％は、5つの要素があり、境界線とパディングを考慮している場合、ほぼ正しい場合があります。ただし、要素の数、パディングの量などによって異なります。

Flexboxを使用する場合は、難しくありません。私が投稿しようとしているコードの全クレジットは、 CSSトリックにあります。これが彼らのCSSだからです。

以下はベンダープレフィックスを含む例です。

#menu{
  
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
  
 }
<ul id="menu">
  <li>Home</li>
  <li>Store</li>
  <li>Blog</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Flexboxの唯一の問題は、IE 9以下をサポートする必要がある場合です。それ以外の場合、Flexboxを使用しない理由はありません。 ここでFlexboxのブラウザサポートを表示できます。

これは私のために働いたものです：

#menu{
    height:31px;
    width:930px;
    margin:0 auto;
    padding:3px 0px 0px 90px;
    color:#FFF;
    font-size:11px;
}
#menu ul{
    display:inline;
    width:930px;
    margin: 0 auto;
}
#menu ul li{
    list-style:none;
    padding:0px 0px 0px 0px;
    display:inline;
    float:left;
    width:155px;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top