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

黑客松Hackathon(二)

黑客松Hackathon(二...

這是一次不同的體驗... 我一直都渴望有所謂的工作團隊並且享受共同討論共同創作的樂趣... 這次在黑...

分享到各社群的方式

分享到各社群的方式

每次在寫網站系統時..客戶總會要求希望他們的網站可以有分享到社群網站的功能... 所以把一些常用的方...

如何用javascript接收radio button被選取後的值

如何用javascript接...

剛剛竟然犯了最簡單的錯誤~ 而且還是在趕著時間的時候⊙⊙ 我竟然蠢到用接收input 的方式去接收 ...

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