設置列表項目（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>