设置列表项目（LI）恰好

Question

页

中心这里是我的简单的代码：

<ul> 
    <li> 
     Example1 
    </li> 
    <li> 
     Example12 
    </li> 
    <li> 
     Example13 
    </li> 
</ul> 

与此css：

ul 
{ 
    text-align: center; 
    margin: 0; 
    padding: 3vh; 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    background-color: #333; 
    overflow: hidden; 
    list-style-type: none; 
} 
li 
{ 
    display: inline; 
} 

而且"Example1"剂量不完全是在页面的中心。 这是怎么看起来像现在（black线意味着页面的中心，"Example1"替换"Home"）：

我怎样才能修复它出现这个样子的（black线平均页​​面中心）：

Answer 1

定义你的lidisplay:inline-block;和你ul定义box-sizing:border-boxleft:0;right:0;

ul 
 
{ 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 3vh; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left:0;right:0; 
 
    background-color: #333; 
 
    overflow: hidden; 
 
    list-style-type: none;box-sizing:border-box 
 
} 
 
li 
 
{ 
 
    padding-left: 3vh; 
 
    padding-right: 3vh; 
 
    display: inline-block; 
 
    vertical-align:top; 
 
margin:0; 
 
}

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