如何使 UL + LI 水平顯示 ? | 點燈坊

UL 與 LI 預設會垂直顯示，但實務上卻常常使用 UL 與 LI 製作水平 Menu，可使用 flex 或 inline 使 UL 與 LI 水平顯示。

Version

Tailwind CSS 1.9.0

flex

以水平顯示 menu。

<template>
  <ul class="flex">
    <li class="mr-1">Home</li>
    <li class="mr-1">Search</li>
    <li class="mr-1">About</li>
  </ul>
</template>

• flex：將 <ul> 成為 Flexbox container，這使得 <li> 由原本 垂直顯示 而改成 水平顯示

inline

<template>
  <ul>
    <li class="inline mr-1">Home</li>
    <li class="inline mr-1">Search</li>
    <li class="inline mr-1">About</li>
  </ul>
</template>

• inline：原本 <li> 的 display 為 list-item 會換行，特別改成 inline 使其不換行

Conclusion

• 相同效果在 CSS 常有多種寫法，flex 是借其預設為 flex-row 因此 水平顯示；inline 則改變 <li> 的 display 從 list-item 改為 inline
• flex 只需用在 <ul> 上，而 inline 需套用在每一個 <li>，實務上建議使用 flex 較為精簡

Reference

Chris Coyier, When do you use inline-block ?