0

私はメニューに取り組んでおり、そのように中央に保持したい

ここに画像の説明を入力

しかし、現在はそのようになっています。私は多くのcssトリックを試しましたが、私が望むように中央に配置するものは何もないので、誰かが私を助けてくれます。

ここに画像の説明を入力

ここに私のhtmlがあります

  <div class="nav-menu">
            <ul>
                <li><a href="">All</a></li>
                <li><a href="">Animals</a></li>
                <li><a href="">Funny</a></li>
                <li><a href="">Gifs</a></li>
                <li><a href="">Mems</a></li>
                <li><a href="">TV</a></li>
                <li><a href="">Social Media</a></li>
                <li><a href="">Text</a></li>
                <li><a href="">Like A Boss</a></li>
                <li><a href="">Fail</a></li>
                <li><a href="">Demotivational</a></li>
                <li><a href=""></a></li>
                <li><a href="">WTF</a></li>
                <li><a href="">Awesome</a></li>
                <li><a href="">Videos</a></li>

            </ul>    
        </div>

ここに私のcssがあります

.nav-menu{
display: table;
width:570px;
}
.nav-menu ul{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:center;
margin: auto;
width: 570px;
}

.nav-menu ul li{
display:inline-block;
float:left;
margin-right:25px;
margin-bottom:10px;
}

.nav-menu ul li a{

float:left;
margin:0;
text-decoration:none;
color:#9e9e9e;
font-size:11px;
text-align: center;
}

.nav-menu ul li a:hover{
display:block;
float:left;
margin:0;
text-decoration:underline;
color:#b8c5b2;
font-size:11px
}
4

1 に答える 1

4

確かに、このフィドルを参照してください。新しい CSS:

.nav-menu {
    width:570px;
    text-align:center;
    background:#000;
}
.nav-menu ul {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    margin: auto;
    list-style:none;
}
.nav-menu ul li {
    display:inline-block;
    margin-right:25px;
    margin-bottom:10px;
}
...

あなたの の を削除float:leftし.nav-menu ul li、 の幅を削除し、.nav-menu ulを に移動しtext-align:centerました.nav-menu。

更新また、display:tableこれをテストの 1 つとして追加したと思われるので削除しましたが、単に不要です。

于 2013-08-18T13:32:07.380 に答える