0

横向きのメニューを揃えるのに本当に苦労しています。これまでのところ、私のメニューは次のようになっています。 ここに画像の説明を入力してください

画像のメニューを構成する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;

}
4

3 に答える 3

0

ここであなたが変更しなければならないCSS

.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
text-align:center;
}
.slider
{
list-style: none;
height: 38px; 
margin: 0;
padding: 0;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;
display: inline-block;
padding:0 10px;
}
于 2012-05-29T06:22:08.693 に答える
0

幅を削除し、oleを削除margin: 0 autoして追加しました。.slidertext-align: center

ライブデモをチェックしてください:http: //jsfiddle.net/RJL7J/

お役に立てれば。

于 2012-05-29T06:12:41.703 に答える
0

私はこれがここで詳細に答えられたと信じています。

基本的には、個々のボタンをレンダリングしdisplay:inline-blockて、それらを正当化できるようにする必要があります。ただし、正当化を強制するために「ダミー」の改行を追加することにはトリックがあります。

于 2012-05-29T06:13:17.857 に答える