Question

我希望根据第一行自动缩进包装内容。为了做到这一点，我使用了以下HTML和CSS代码：

＆＃13;

li {
  padding-left: 10px;
  text-indent: 10px;
}
.Slides {
  width: 20em; //Showing wrap-around
}

＆＃13;

<div class="Slides">
  <div>
    <h1>My heading</h1>
  </div>
  <div>
    <li>First line</li>
  </div>
  <div>
    <li>Second line which is very long, must have the same indentation (when wrapped to next line) as that of the first line.</li>
  </div>
</div>

＆＃13;

在多行的情况下，这给了我一个很好的缩进，但只在webkit浏览器中。在Firefox和IE中，内容与项目符号重叠。

为了检查这一点，我还尝试将内容包装在li元素中。但这又给了我一个跨浏览器的不同布局。如何在所有浏览器中实现一致的行为？

Answer 1

请试试这个。我用ul包裹了li标签。如果li没有在ul的

中正确包装，有时会产生问题

<div class="Slides">
  <div>
    <h1>My heading</h1>
  </div>
  <div>
<ul>
    <li>First line</li>
</ul>
  </div>
  <div>
<ul>
    <li>Second line which is very long, must have the same indentation (when wrapped to next line) as that of the first line.</li>
</ul>
  </div>
</div>

Answer 2

不要使用＆lt; li＆gt;元素。只需使用普通的旧＆lt; p＆gt;纯粹用css缩进元素和样式。如果您愿意，甚至可以使用glyphcon或css来添加项目符号。同样在css中，如果某个浏览器中的某些内容有效，而不是其他浏有时，浏览器开发人员会在测试版中添加功能，因此您必须使用供应商前缀来使用它们。

包裹时的缩进不正确

2 个答案: