資料載入中

胡言亂語

使用CSS 讓ul li 橫向水平

好吧,其實這個css常在用,但我每次都沒特別紀錄,然後每次又忘記然後又要Google。

其實主要就是使用 CSS 的 display inline 的語法。

就這麼簡單。

以下範例:
<div id="topmenu">
選單橫向水平呈現
<ul>
 <li>這裡是選單01</li>
 <li>這裡是選單02</li>
<li>這裡是選單03</li>
</ul>
</div>

然後css的寫法如下:
<style type="text/css">
<!--
#topmenu ul li {
 display:inline;
}
-->
</style>

以上紀錄~

  • CSS display inline 語法使用技巧
  • 常用 CSS 語法記錄方法
  • 如何記住 CSS display inline
  • CSS 使用心得與經驗分享
  • 簡單 CSS 語法整理與備忘
https://innstory.com/story-使用CSS讓ulli橫向水平-2679

上一篇
 htaccess設定網站預設首頁次序

下一篇
設定Postfix使用SMTPServer當作relay主機 

發表留言

  • Jasica

    我也常常遇到這種情況,明明是常用的 CSS 屬性,卻總是要花時間重新查找。尤其是像 display inline 這種基本語法,記起來卻總是會忘。有時候覺得編碼的記憶力真是跟不上進度,真希望有什麼好辦法可以幫助記住這些常用的指令。或許可以做個筆記本,隨時翻閱?感覺這樣會省不少時間。
    2026-05-17 上午 5 點回覆
  • 鄭暮川

    每次用到的時候都得重新找,真是麻煩。
    2026-02-20 下午 2 點回覆

作者簡介

離不開電腦的宅男


推薦閱讀

作者其他相關類別故事

修改php設定

修改php設定

Mark Chang 8 年又 143 天 2.2K

進入系統 用文字編輯軟體打開php.ini改變以下設定 disablefunctions = s...

.htaccess 使用gzip壓縮網站加快加載速度並節省頻寬

.htaccess 使用gz…

Mark Chang 5 年又 86 天 1.6K

modgzip是Apache的外部擴展模組,可以將文件發送到客戶端之前快速輕鬆地對其進行壓縮。 如果...

使用 SendGrid 這類第三方代發郵件平台時,寄信平台顯示信件已經順利寄出,但對方卻說收不到信,會有哪些原因

使用 SendGrid 這類…

Mark Chang 2026-06-09 下午 3 點 131

在使用 SendGrid 這類第三方代發郵件平台時,出現「後台顯示已寄出(Delivered),但收...