利用 css 讓 ul 置中呈現

Temperature: 0 °C

ChungChung
以前寫網站...總是喜歡用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>
以上...便可完成置中顯示....

作者簡介

Chung

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

訪客留言

留下一些足跡證明你來拜訪過我

  • Chung

    Chung

    2015-10-08 17:13:18
    是啊,小時候超級崇拜他
  • MaggieLee

    MaggieLee

    2015-10-08 16:25:27
    馬蓋先以前很紅ㄋ!

推薦閱讀

作者其他相關類別故事

CentOS 5.2 使用 YUM 將 PHP 5.1.6 更新到 5.2.6

CentOS 5.2 使用 YUM 將 PHP 5.1.6 更新到 5.2.6

CentOS . 版內建的 PHP 版本為 ..,甚至於 . 版仍舊是 .. 版本。 ...

Responsive Web Design使用CSS3的Media Queries進行自適應網頁設計

Responsive Web Design使用CSS3的Media Queries進行自適應網頁設計

智慧型手持裝置(手機、平板)已是非常普及的日常生活必需品。 所以現在,在開發系統時客戶...

行事曆功能導入

行事曆功能導入

cc Innstory有行事曆囉! 我試著把Innstory當作是我的筆記本,將生活發...

請選擇選項

執行錯誤

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

現在就加入innstory,開始紀錄你的故事。

「innstory」是一個儲存故事的地方,我們致力於成為一個有溫度的平台,加深人與人之間的羈絆是我們所努力的方向。
我們深信人與人間的區塊鏈不是只是冷冰冰的運算。現在就加入我們。