如何使用 HTML 和 CSS 在列表中換行
[英]How to Break Lines in Lists with HTML and CSS
問題描述
我有一個我用 HTML 創建的列表，但我無法讓<li>標簽內的句子中斷，而 go 則不必為此使用<br> 。 我怎么能為列表換行？
這是下面的 HTML 代碼：
OBS：在我為<ul>標簽設置寬度后，它會將我的內容固定在左側而不是頁面居中
.container h1 { margin: 50px; text-align: center; font-size: 2em; font-weight: bold; color: white; }.container h2 { margin: 50px; text-align: center; font-size: 2em; font-weight: bold; color: #0047FF; text-decoration: underline; }.container ul { display: block; margin: 50px; text-align: center; max-width: 35%; font-size: 1.5em; color: white; } ul li { list-style: inside; margin-bottom: 2em; }
<div class="container"> <h1>FREQUENTLY ASKED QUESTIONS</h1> <ul> <li>Learn to plan and set your goals so you get more done in less time.</li> <li> Discover the #1 way to create to-do lists to dramatically improve your daily performance and productivity. </li> </ul> </div>
我嘗試使用<br>標簽進行行跳轉，這樣文本將在下一行 go ，但我希望列表中的所有行在所有<li>標簽中都換行
3 個解決方案
解決方案1
0 2022-12-22 01:40:51
您可以在每個要點之間放置一個空格，例如
ul li {
margin-bottom: 1em;
}
但是您還缺少<ul>環繞列表項：
<ul>
<li>Learn to plan and set your goals so you get more done in less time.</li>
<li>Discover the #1 way to create to-do lists to dramatically improve your daily performance and productivity.</li>
</ul>
解決方案2
0 2022-12-22 01:49:06
您也可以使用自動換行
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 250px;
border: 1px solid #000000;
}
div.a {
word-wrap: normal;
}
</style>
</head>
<body>
<div class="b">
<h1>FREQUENTLY ASKED QUESTIONS</h1>
<li>Learn to plan and set your goals so you get more done in less time.</li>
<li>Discover the #1 way to create to-do lists to dramatically improve your daily performance and productivity.</li>
</div>
</body>
</html>
它看起來像這樣
解決方案3
0 2022-12-30 13:50:30
你不能通過給display:block; 到<ul> 。
您可以使用此示例實現 1 列居中列表；
ul{
...
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
place-items: center;
}
如何忽略HTML和CSS中的2條換行符？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.