横並びのメニューで文字の長さの比率を保ちつつ均等配置にする
@wordpressflexboxで並べた各メニューを、テキストの長さに合わせて長さを変える。
文字の長さの比率を保ちつつ均等配置にする
flexboxで横並びのメニューを作り、flexboxの子要素に
flex: 1 0 auto;を追記する。
全体のコードは、
ul {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
}
ul li {
flex: 1 0 auto;
text-align: center;
border-right: 1px solid #000;
}
ul li:first-child {
border-left: 1px solid #000;
}
