Question

.container                          {width: 1280px;min-height: 100%;margin: 0 auto;border: 1px solid #fff;}
.nav-icon                           {display: block;margin-left: auto;margin-right: auto;}

.navigation                         {text-align: center;}
.bans                               {background: url('http://i.imgur.com/iAUP7gR.png');width: 156px;height: 85px;float: left;display:inline-block;margin-left: 21px;margin-right: 21px;}
.shop                               {background: url('http://i.imgur.com/4x7gr4h.png');width: 155px;height: 85px;float: left;display:inline-block;margin-left: 21px;margin-right: 21px;}
.vote                               {background: url('http://i.imgur.com/WPZnkFV.png');width: 160px;height: 59px;float: left;display:inline-block;margin-left: 21px;margin-right: 21px;margin-top: 11px;}
.leaderboard                        {background: url('http://i.imgur.com/ygQlMaN.png');width: 394px;height: 85px;float: left;display:inline-block;margin-left: 21px;margin-right: 21px;}

我正在使用它尝试在Ul ...中心多个Li ...

<ul>
    <li><a href=""><div class="bans"></div></a></li>
    <li><a href=""><div class="shop"></div></a></li>
    <li><a href=""><div class="vote"></div></a></li>
    <li><a href=""><div class="leaderboard"></div></a></li>
</ul>

Answer 1

即使是更简单，也不要使用儿童div，因为你可以根据需要设计LI。而且你不想要无用的元素。不适合优化。

编辑：因为TS需要一个菜单..

<强> HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<强> SCSS

ul {
    background: green;
    width: 450px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    overflow: hidden;
    li {
        width: 70px;
        height: 50px;
        background: red;
        margin: 0 10px;
        float: left;
    }   
}

jsfiddle

Answer 2

基于nicole101的回答：

CSS
.navigation{
text-align: center;
}
HTML
<div class='navigation'>
<ul>
    <li><a href=""><div class="bans"></div></a></li>
    <li><a href=""><div class="shop"></div></a></li>
    <li><a href=""><div class="vote"></div></a></li>
    <li><a href=""><div class="leaderboard"></div></a></li>
</ul>
</div>

然后它会居中

Answer 3

这是你的意思吗？

ul.mylist li{
    float:left;   
    display:inline;
    margin:0px 10px;
}

DEMO

Answer 4

试试这个css

ul li a{display:block;text-align:center;}
ul li div{display:inline-block;vertical-align:top;}

<强> Demo

----------------

更新了css

ul li a{display:block;text-align:center;}
ul li div{display:inline-block;vertical-align:top;}

.bans{background: url('http://i.imgur.com/iAUP7gR.png');width: 156px;height: 85px;}
.shop{background: url('http://i.imgur.com/4x7gr4h.png');width: 155px;height: 85px;}
.vote {background: url('http://i.imgur.com/WPZnkFV.png');width: 160px;height: 59px;}
.leaderboard{background: url('http://i.imgur.com/ygQlMaN.png');width: 394px;height: 85px;}

<强> Updated Demo

Answer 5

我删除了里面不必要的div。你可以删除li内不必要的div。要在父div上设置ul items中心，我已添加了text-align:center，它会将ul置于页面中心。

<div class="container">
<ul class="mylist">
<li><a href="" class="bans"></a></li>
<li><a href="" class="shop"></a></li>
<li><a href="" class="vote"></a></li>
<li><a href="" class="leaderboard"></a></li>
</ul>
</div>

这是CSS。

.container
{
width: 1280px;
min-height: 100%;
margin: 0 auto;
border: 1px solid #fff;
text-align: center; /*this line will made the center horizontally*/
}

ul.mylist
{
margin:0 auto;
width:100%;
}

ul.mylist li{display:inline-block;}

以下是 Demo

Answer 6

使用居中对齐; 你的div上而不是在li上使用它

不能将李中心放在Ul里面

6 个答案:

----------------