記憶加載中,請稍待...
Hello,你已經閒置了一些時間~
或許,你有興趣閱讀一篇故事:
JuilinChung
鎖住記憶
選擇大頭貼照
重新調整位置

利用 css 讓 ul 置中呈現

收藏小紙條

無法截取內容!!但仍舊可以收藏小紙條

2015-01-12 JuilinChung 408 2
以前寫網站...總是喜歡用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>
以上...便可完成置中顯示....
L O A D I N G
閱讀分類:寫程式筆記  

其他您可能會有興趣的故事

是不是我的心太大所以容易寂寞
源順酒釀

須同意使用 Email 才可進入此頁面

須同意使用 姓名 才可進入此頁面

須同意使用 性別 才可進入此頁面

須同意應用程式才能使用Facebook帳號進入此頁面

請重新登入!

Hi,謝謝你的參與,但無法重複投票哦~

Hi,請選擇一個你認為的答案

錯誤的URL...

執行錯誤...

別忘了填寫欄位...

輸入格式錯誤...

Email已經有人使用...

請填寫Email...

請填寫正確的Email...

密碼裡需包含英文字及數字8至12...

確認密碼是否與密碼相同...

很抱歉 您並沒有權限!請確認您的帳號密碼 或請連絡我們

正在更新排序...

帳號已經存在!請確認您的帳號密碼 或請連絡我們...