HTML證明內容和跨越

.d1 { 
 
    background-color: red; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.s1 { 
 
    color: blue; 
 
}

<div class="d1"> 
 
    <u>list:</u> 
 
    <br>item1 
 
    <br>item2 
 
    <br><span class="s1">item3</span> 
 
</div>

我想使其中的內容在中心對齊一個div。我用上面的代碼中顯示的文本list: item1 item2 item3一個在另一個之下，list:下劃線且item3有藍色，但是這給了這麼奇怪的結果：

item1和item2但item3是...上頂部和旁邊list: ...怎麼回事？我該如何解決這個問題？ Ty

來源

2017-08-20 darkchampionz

您可以通過不使用flex而是使用inline-block和封裝<div>來解決此問題。如果你需要一個更具體的解決方案，讓我知道：

.d1 { 
 
    background-color: red; 
 
    text-align: center; 
 
} 
 
.d2 { 
 
    display: inline-block; 
 
    text-align: left; 
 
} 
 
.s1 { 
 
    color: blue; 
 
}

<div class="d1"> 
 
    <div class="d2"> 
 
     <u>list:</u> 
 
     <br>item1 
 
     <br>item2 
 
     <br><span class="s1">item3</span> 
 
    </div> 
 
</div>

來源

2017-08-20 09:17:39 paper1111

您可以使用<li>以及並添加u li {list-style-type: none;}以禁用列表項圈。

檢查：

.d1 { 
 
    background-color: red; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.s1 { 
 
    color: blue; 
 
} 
 
u li {list-style-type: none;}

<div class="d1"> 
 
    <u>list: 
 
    <li>item1</li> 
 
    <li>item2</li> 
 
    <li><span class="s1">item3</span></li> 
 
    </u> 
 
</div>

來源

2017-08-20 09:17:23

.d1 { 
 
    background-color: red; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 
.s1 { 
 
    color: blue; 
 
}

<div class="d1"> 
 
    <u>list:</u> 
 
    <br>item1 
 
    <br>item2 
 
    <br><span class="s1">item3</span> 
 
</div>

結果好嗎？

來源

2017-08-20 09:17:28

你可以讓你的無序列表的使用像這樣的在這裏！

.d1 { 
 
    background-color: red; 
 
    justify-content: center; 
 
    display: block; 
 
    text-align: center 
 
} 
 
.s1 { 
 
    color: blue; 
 
}

<div class="d1"> 
 
<p>Items:</p> 
 
<lu> 
 
    <li>item1</li> 
 
    <li>item2</li> 
 
    <li><span class="s1">item3</span></li> 
 
</lu> 
 
</div>

來源

2017-08-20 09:21:30 Kyon

爲什麼你使用標記和「顯示：彎曲」。如果使用display:flex，那麼它的子節點將佔據整個高度，並且list:,item3已經完成了該操作並創建了3列。除了其他內容不被視爲子節點。你可以看到link來清除flex的想法

來源

2017-08-20 09:22:20 shourav

HTML證明內容和跨越

回答

相關問題