所以我想<li>在線顯示專案。但是當我display:inline在 CSS 專案符號中使用屬性時，它會被隱藏。我從問題中嘗試過這個
HTML
<div class="list">
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
和 CSS
.list{
display: inline;
}
.list-inline li{
margin: 10px;
display: inline;
}
display: inline似乎作業，但子彈變得隱藏。我怎樣才能解決這個問題？查看JSFiddle
uj5u.com熱心網友回復：
你可以display: flex;用來list-inline上課。
.list{
display: inline;
}
.list-inline {
display: flex;
}
.list-inline li{
margin: 10px;
/* display: inline; */
}<div class="list">
<ul class="list-inline">
<li>Hi</li>
<li>Hi</li>
<li>Hi</li>
<li>Hi</li>
<li>Hi</li>
<li>Hi</li>
<li>Hi</li>
</ul>
</div>uj5u.com熱心網友回復：
您可以使用這種樣式。
.list{
display: inline;
}
.list-inline li{
margin: 10px;
}
.list-inline{
display: flex;
}
這是你想要的嗎？你可以把 ul 變成一個彈性盒子！如果你想了解更多關于 css 中的子彈，請看這個 w3schools 檔案??
https://www.w3schools.com/css/css_list.asp
uj5u.com熱心網友回復：
我認為inline否定子彈，但在宣告中使用flexwith會產生你正在尋找的效果......flex-direction: row;ul
ul {
flex-direction: row;
display: flex;
}
.list {
}
.list-inline li {
margin: 10px;
}<div class="list">
<ul class="list-inline">
<li>Hi</li>
<li>Hi</li>
<li>Hi</li>
<li>Hi</li>
<li>Hi</li>
<li>Hi</li>
<li>Hi</li>
</ul>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/367439.html
標籤：javascript html css
上一篇：如何連接來自API的JSON回應中的鍵并顯示在VUE組件中
下一篇：匯入img而不是SVG