~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~關於如何讓li據中的解決方法：~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
問題：
本人在寫網頁時，想要寫一個側邊欄，又想要做成選項卡的樣子，比如設置4個li，分別為：詩詞，文章，音樂，影視；每點擊一個li，下面便會出現其中的一個選項卡結果。
於是，需要設置li的高和寬，使其居中於側邊欄頭部的中間。但是，如果不用ul的margin-left來做的話，最初怎麼也無法解決；可使用margin-left，需要計算其中的li的margin，padding，border等繁瑣的事，於是我想用其他的方法。
比如 側邊欄的div寬300px;我有四個li，每個設置height：30px；width：60px；並讓這四個li位於側邊欄的頭部；就可以設置ul的margin-left：80px；
這樣就會使四個li居於中間；如果想使四個li之間有間隔。可以設置li的margin-left:5px;這樣就需要改變先前ul的margin-left為（300-240-20）/2-2.5，因為margin-left是透明的，所以才會有上面這個計算式子。可見可能會出現小數，這樣是我們要避免的。利用ul的margin-left很簡單地設置居中，只是不是強迫症患者的首選。因為這個方法，大家應該都會，而且百度一下，都會出來這樣的例子，在此不貼代碼。
在這個方法中，我們可以設置ul的高和寬，但只要不讓ul的寬超過div的寬，以及不讓ul的寬低於四個li的和的寬，就不會出現排版錯誤。
本人也不喜歡這個方法，於是，就有了第二種方法。
對於第二種方法，首先要說的是，設置ul的display：table，text-align:center。是不是覺得好神奇，怎麼會出現display：table，說實話，這也是我第一次用到這個屬性，雖然知道有這個屬性，但一般還真不用，我們似乎只用none，inline和block，但這裡我們必須用這個屬性，不然解決不了。下面是一段代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width:500px;
height:500px;
background-color: red;
}
#ul1{
display: table;
margin:0 auto;
height:40px;
text-align: center;
padding:0;
}
.li1{
float: left;
margin-left: 5px;
padding:0;
width:70px;
height:60px;
line-height: 60px;
font-size: 20px;
background-color: yellow;
list-style-type: none;
}
</style>
</head>
<body>
<div id="div1">
<ul id="ul1">
<li class="li1">11111</li>
<li class="li1">22222</li>
<li class="li1">33333</li>
<li class="li1">44444</li>
</ul>
</div>
</body>
</html>
這段代碼可以解決居中方法，注意：ul設為display：table；text-align：center；但記住千萬千萬不可以設置ul的寬，不然無法實現。
就是ul的設為text-align：center；
li的設為display：inline；
但這樣的話，就無法做出li的寬和高，雖然也會居中，但已經失去了其解決的意義。