html - インライン要素が max-width を超えて 2 行に分割されると、CSS の max-width によって空白が多すぎます

Question

要素のスタイルliを動的にテキスト コンテンツに合わせて等間隔にしようとしてli'sいますが、これを達成できないようです。

結果は現在次のようになります。

li's間の余白を一貫させたいが、全体li'sを動的な幅にするが、特定の幅を超えないようにしたい: (2 つのul's異なるパディングのスタイルがあるため、左側のメニューと右側のメニューですが、それぞれliが一貫して間隔を空けて配置されていますul's)

CSSは（任意に）：

li{
   display: inline-block;
   max-width: 95px;
   padding: 5px 10px;
   etc....
}

可能であれば JavaScript や html マークアップを避けて、css を使用してこれを達成しようとしています。ありがとうございました。

Answer 1

要素間の空白を同じにしたい場合、つまり. 見出しが小さいほど、画像のようにメニュー項目が小さくなり、運が悪くなります。JavaScriptがないとできないと思います。

均一な幅のメニュー項目を設定する場合、それはかなり簡単に実現できます。s を に設定し<li>て100%/(number of menu items)フロートさせるだけです。

li {
    float:left;
    width:14.2857% /* 100/17 */
}