自动换行后缩进怎么做(CSS)？(可用于 Li y 元素的排版)

可以使用CSS中的text-indent属性来实现自动换行后的缩进。具体做法如下：

li {
  text-indent: 2em; /* 缩进2个字符 */
  white-space: pre-wrap; /* 自动换行 */
}

其中，text-indent属性用于设置缩进的宽度；white-space属性用于设置如何处理元素中的空白符，pre-wrap值表示保留空格和换行符，并自动换行。

这样设置后，li元素中的文字就会自动换行，并且每行的第一个字符会缩进2个字符的宽度。

相关问题

使用盒子模型来编写贵州旅游，盒子模型内部排版为左边图片右边代码

以下是使用盒子模型来编写贵州旅游的代码：

<div class="container">
  <div class="image">
    <img src="guizhou.jpg" alt="贵州旅游">
  </div>
  <div class="code">
    <h2>贵州旅游</h2>
    <p>贵州位于中国西南部，是一个自然风光秀丽的省份。这里有壮丽的山川、清澈的江河、丰富的民族文化和独特的风俗习惯，是旅游者的天堂。</p>
    <h3>旅游景点</h3>
    <ul>
      <li>黄果树瀑布</li>
      <li>镇远古镇</li>
      <li>贵阳市民族博物馆</li>
      <li>荔波小七孔</li>
      <li>黔东南苗族侗族自治州</li>
    </ul>
  </div>
</div>

以下是对应的 CSS 样式：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image {
  flex: 1;
  margin-right: 20px;
}

.image img {
  width: 100%;
}

.code {
  flex: 1;
}

.code h2 {
  font-size: 28px;
  font-weight: bold;
}

.code h3 {
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
}

.code ul {
  margin-left: 20px;
  list-style: disc;
}

这段代码中，我们使用了 `display: flex` 属性来创建一个盒子模型，并使用 `justify-content: space-between` 和 `align-items: center` 属性来让图片和代码块在水平和垂直方向上居中对齐。图片和代码块分别使用了 `flex: 1` 属性来让它们占据盒子模型的相同比例，同时使用 `margin-right: 20px` 属性来在图片和代码块之间留出一定的间距。在代码块中，我们使用了标题、段落和列表来介绍贵州旅游的相关信息，同时使用了一些基本的 CSS 样式来调整字体大小、加粗、缩进等样式效果。