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

colorbox 使用 onclick href 驅動

colorbox 使用 on...

colorbox 一直都是很優秀的Lightbox外掛... 目前的網站中幾乎或多或少都會用到Lig...

解決手機瀏覽器上點擊輸入框放大問題

解決手機瀏覽器上點擊輸入框放...

開發RWD的網站已經是趨勢,主要也是因為手機用戶實在是太多 但在過程中一直有個問題困擾著我.... ...

DIV區塊內文字左右對齊?

DIV區塊內文字左右對齊?

最近常接到一些英文網站建置的專案....為了讓內容文字能夠左右對齊... 所以我用了以下方式 div...

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