如何使用HTML和CSS在列表中换行

f0brbegy 于 2022-12-24 发布在其他

关注(0)|答案(2)|浏览(124)

我有一个用HTML创建的列表，但是如果不使用<br>，我就不能让<li>标记中的句子换行，那么我该如何为列表换行呢？
下面是HTML代码：
图像代码：https://imgur.com/undefined
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>标记进行行跳转，以便文本向下移动一行，但是我希望列表中的所有行都能在所有<li>标记中换行

css

来源：https://stackoverflow.com/questions/74883389/how-to-break-lines-in-lists-with-html-and-css

2条答案

按热度按时间

4smxwvx51#

您可以在每个项目符号之间添加空格，例如

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>

赞(0）回复(0）举报 2022-12-24

jdgnovmf2#

您也可以使用自动换行

<!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>

它看起来像

赞(0）回复(0）举报 2022-12-24

我来回答

如何使用HTML和CSS在列表中换行

2条答案

相关问题

热门标签

最新问答