横向きのメニューを揃えるのに本当に苦労しています。これまでのところ、私のメニューは次のようになっています。
画像のメニューを構成する2つの中央要素があり、ページ内で中央に配置された灰色の境界線(slide-navクラス)を確認できます。今、私はメニューにも同じことをしようとしています
liの幅をハードコーディングする必要がありましたが、理想的には自動的にフィットさせたいと思います。javascriptなしでメニュー項目を中央に揃えることは可能ですか?
私のhtml
<nav class="slide-nav">
<ul class="slider">
<li class="selected">
<div>
<span class="heart"></span>
<div>
Get Started</div>
</div>
</li>
<li>
<div>
<span class="price-tag"></span>
<div>
Get Results</div>
</div>
</li>
<li>
<div>
<span class="star"></span>
<div>
Track & Engage</div>
</div>
</li>
<li>
<div>
<span class="people"></span>
<div>
Features</div>
</div>
</li>
</ul>
</nav>
css
.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
}
.slider
{
list-style: none;
height: 38px;
margin: 0 auto;
width: 722px;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;
display: inline-block;
width: 150px;
}
.slider li div
{
line-height: 31px;
}
.slider li div div
{
text-indent: 6px;
}
.slider li.selected > div
{
border-bottom: solid 7px #592970;
}