UL 與 LI 預設會垂直顯示，但實務上卻常常使用 UL 與 LI 製作水平 Menu，可使用 Flexbox 或 display: inline 使 UL 與 LI 水平顯示。
Version
CSS 3
Flexobx
以水平顯示 menu。
<template>
<ul class="menu">
<li>Home</li>
<li>Search</li>
<li>About</li>
</ul>
</template>
<style scoped>
.menu {
display: flex;
list-style: none;
}
.menu li {
margin: 1rem;
}
</style>
10 行
.menu {
display: flex;
list-style: none;
}
display: flex：將<ul>成為 Flexbox container，這使得<li>由原本垂直顯示而改成水平顯示list-style: none：使<li>之前不顯示 disc
15 行
.menu li {
margin: 1rem;
}
- 設定
<li>之間的margin為1rem
inline
<template>
<ul class="menu">
<li>Home</li>
<li>Search</li>
<li>About</li>
</ul>
</template>
<style scoped>
.menu li {
display: inline;
margin: 1rem;
}
</style>
10 行
.menu li {
display: inline;
margin: 1rem;
}
display: inline：原本<li>的display為list-item會換行，特別改成inline使其不換行
Conclusion
- 相同效果在 CSS 常有多種寫法，
display: flex是借其預設為flex-direction: row因此水平顯示；display: inline則改變<li>的display從list-item改為inline display: flex只需用在<ul>上，而display: inline需套用在每一個<li>，實務上建議使用display: flex較為精簡