CSSを使用してトップメニューのカテゴリを整列するセンター

Question

メニューのカテゴリを中央に配置する必要がありました。メニューのカテゴリは幅1200pxに収まるようにする必要があります。メニューと最後の項目は画面の右隅に表示されます（つまりmargin-right：0）。同じもののサンプルコードを以下で見つけてください。

https://jsfiddle.net/es0o324t/1/ 

HTML：

<div class="navigationbarcollectioncomponent"> 
    <div id="nav_main"> 
     <ul> 
      <li class="La parent"> 
       <a href="">Clothing</a> 
      </li> 
      <li class="La parent"> 
       <a href="">Denim</a> 
      </li> 
      <li class="La parent"> 
       <a href="">Accessories</a> 
      <li class="La parent"> 
       <a href="">Online Exclusives</a> 
      </li> 
      <li class="La parent"> 
       <a href="">Sale</a> 
      </li> 
      <li class="La parent"> 
       <a href="">Hot offers</a> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS：私はJavaScriptを経由して、メニューにカテゴリの幅を読み取り、その後、ギャップbを計算することによって、これを達成した

body { 
margin:0; 
padding:0; 
} 

ul{ 
margin-left:0; 
} 

ul,li{ 
list-style: none; 
padding:0; 
} 

.navigationbarcollectioncomponent { 
width: 1200px; 
margin: 0 auto; 
} 

#nav_main li.La{ 
float: left; 
} 

#nav_main li.La > a { 
color: #373737; 
display: inline-block; 
font-family: "Lato-Regular"; 
font-size: 16px; 
line-height: 36px; 
margin: 0; 
padding: 0px 8px; 
text-transform: uppercase; 
} 

/wカテゴリの数に基づくカテゴリ。

しかし、問題はJavaScriptを使用しないCSS経由でのみ行う必要があることです。 JSを使った計算には時間がかかります

また、カテゴリ数の数は動的です。したがって、私は各カテゴリ（すなわち、liタグ）の余白 - 右の値をハードコードすることはできません。

解決策がある場合は教えてください。

予想される結果のスナップショットのPFA。

まずカテゴリでは、最も1200px幅に整列し、最後のカテゴリを右揃えにする必要がありますaとb/wの最初と最後のカテゴリですカテゴリが中央でも中央に

Answer 1

CSS3でこの質問にタグを付けたので、なぜflexを使用しないのですか？

ulをflexと表示し、justify-contentをspace-betweenに設定します。

ul { 
    width: 100%; padding: 8px; 
    display: flex; 
    justify-content: space-between; 
} 

あなたのフィドル：https://jsfiddle.net/abhitalks/es0o324t/2/

Answer 2

間隔で整列する必要がありますままにしておく必要がありメニューをナビゲートし、このCSSも追加してください。

#nav_main{ 
    margin: 0 auto; 
    display: table; 
} 

Answer 3

チェックこのフィドル：jsfiddle.net/shiyaspathiyassery/6jqy6702/1/

あなたはそれを削除してくださいfloat: left;追加されました。

Answer 4

ここで十分に近いものです。コードスニペットを実行して、<li>テキストアライメントが中央に設定されているため、メニュー間のスペースを均等にするために、左端と右端のメニューがそれぞれ貼り付けられていませんが、結果を確認するには

です。

body { 
 
margin:0; 
 
padding:0; 
 
} 
 

 
ul{ 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: box; 
 
    width: 100%; 
 
} 
 

 
ul,li{ 
 
list-style: none; 
 
padding:0; 
 
} 
 

 
.navigationbarcollectioncomponent { 
 
    display: inline-block; 
 
    width: 1200px; 
 
    margin: 0 auto; 
 
} 
 

 
#nav-main{ 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
#nav_main li.La{ 
 
    text-align: center; 
 
    -webkit-box-flex: 1; 
 
    -moz-box-flex: 1; 
 
    box-flex: 1; 
 
} 
 

 
#nav_main li.La > a { 
 
color: #373737; 
 
display: inline-block; 
 
font-family: "Lato-Regular"; 
 
font-size: 16px; 
 
line-height: 36px; 
 
margin: 0; 
 
padding: 0px 8px; 
 
text-transform: uppercase; 
 
}

<div class="navigationbarcollectioncomponent"> 
 
    <div id="nav_main"> 
 
     <ul> 
 
      <li class="La parent"> 
 
       <a href="">Clothing</a> 
 
      </li> 
 
      <li class="La parent"> 
 
       <a href="">Denim</a> 
 
      </li> 
 
      <li class="La parent"> 
 
       <a href="">Accessories</a> 
 
      <li class="La parent"> 
 
       <a href="">Online Exclusives</a> 
 
      </li> 
 
      <li class="La parent"> 
 
       <a href="">Sale</a> 
 
      </li> 
 
      <li class="La parent"> 
 
       <a href="">Hot offers</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 5

table-layout: fixedは、あなたが探しているものを達成するために使用することができます。

table-layout: fixedでは、水平レイアウトは、表の幅とセルの内容に関係なく列の幅に依存します。 だからあなたの表の幅は各列に等しく分割されます。

は、メニューにカテゴリ間にも間隔を持っていることについて、その、メニューを揃えるセンターについて返信用ulと#nav_main li.La

ul{ 
    margin-left:0; 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    text-align: center; 
} 

#nav_main li.La{ 
    display:table-cell; 
} 

https://jsfiddle.net/f03mqxd7/