Loading...

利用 css 讓 ul 置中呈現

Temperature: 0 °C

ChungChung
author_tools

以前寫網站...總是喜歡用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
寫程式筆記

Prev
 源順酒釀

Next
是不是我的心太大所以容易寂寞 

About the Author

Chung

我是chung
網路工作者
主業是網站系統開發建置
副業是做夢,寫故事
作品請參考/teme.biz
做夢請參考/innstory.com
聯絡/chung.teme@gmail.com

#有人用筆寫日記,有人用歲月寫日記,有人用照片寫日記,而我,用innstory寫日記。

Visitor message

Leave some footprints to prove that you visited me

Recommended reading

Author's other related stories

PHP網路爬蟲之抓取Open Graph(OG) Meta tags

PHP網路爬蟲之抓取Open...

用google爬了很多文章.... 最後終於找到一篇內容..... 只是測試了半天...感覺奇怪為何...

整合Facebook粉絲專頁的即時訊息,Zotabox網站打造免費線上支援平台。

整合Facebook粉絲專頁...

還記得在msn的年代,msn有提供在網站上架構即時通訊功能,方便網站管理者與user直接交談~ 現在...

關掉phpinfo()

關掉phpinfo()

pexelsphotod 配置php環境的時候往往都會寫 phpinfo(); 這個函數來測試php...

Please select an option

error

Hi, thank you for your participation, but you cannot vote repeatedly~

Join innstory now and start recording your story.

"Innstory" is a place to store stories. We are committed to becoming a warm platform. Deepening the bonds between people is our direction.
We are convinced that the blockchain between people is not just a cold calculation. Join us now.

Wrong format