利用 css 讓 ul 置中呈現
Temperature: 0 °C
以前寫網站...總是喜歡用Table 包住內容..
而隨著時空的轉換...現在大都用div..或者..ul..li..包住網站內容...
例如..我們常會使用ul做選單..並且使用css float指令讓目錄靠左或靠右....
但會碰到一種狀況...如果我想要讓ul置中呢???
我試過直接寫text-align:center.......但是....他完全不鳥我.....@@
因為css ul預設是display:block....
ok...所以如果我想讓ul置中就必須更新display狀態...
首先是內容部份...假設我們的結構為「ul 還有父層」wrap...
<pre><code>
<div id="wrap">
<ul>
<li>Hello</li>
<li>word</li>
<ul>
</div>
</code></pre>
接著我們要用css讓#wrap裡的ul置中...並且讓li浮動顯示..
<pre><code>
#wrap {
text-align: center;
}
#wrap ul:first-child{
display:inline-block;
list-style:none;
padding:2px;
height:40px;
}
#wrap ul li{
width:80px;
padding:6px;
height:30px;
float:left;
margin:8px 8px 8px 8px;
}
</code></pre>
以上...便可完成置中顯示....
https://innstory.com/story-利用_css_讓_ul_置中呈現-290
寫程式筆記
