Question

在这里拨弄：https://jsfiddle.net/sgbotsford/d52zyp0t/72/

<li>中使用=>的中多余的第一行缩进在哪里？

这是问题所在。我无法控制的情况是将段落标签放在列表元素内。当我使用：before时，它的负数为负，它可以工作-就像我想要的那样位于边缘。但是在使用：before之前，文本缩进增加了。额外的缩进来自哪里？

所需的行为是使段落和列表项具有相同的样式，除了=>浮在左边距之外。

我敢肯定，我最终可以进行足够的实验来破解一个解决方案，但是现在我正在尝试从盒子模型的角度来理解这种行为。

一个答案建议从中删除text-indent标记，这将导致刷新<li>并缩小<html> <head> </head> <body> <div class=content> This is a paragraph. It has several sentences. It goes on and on and on and on. It has several sentences. It goes on and on and on and on. <ul class="c"> <li>This is a list element that is long enough to wrap, I think. But it needs to be longer to check justification. It looks a lot like a paragraph.</li> <li>This is a list element that is long enough to wrap, I think. But it needs to be longer to check justification.</li> </ul> <ul class="b"> <li>This is a list element that is styled using ::before and outdenting the content. Where does the extra space come from? </li> <li>This is a list element that is long enough to wrap, I think.</li> </ul> </div> </body> </html>上的缩进量

HTML

body {
  text-align: justify;
  hyphens: auto;
  margin-left: 3rem;
}

.content {
  width: 40rem;
  background-color: yellow;
}

p   {
  width: 15rem;
  margin: auto;
  margin-top: 0.6rem;
  background-color: lightgreen;
  padding: 0;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1.4rem;
  text-indent: 1rem;
  text-align: justify;
  hyphens: auto;
  word-break: break-word;
    }


ul {
  list-style-type: none;
  margin: 1rem;
  padding: 0;
}

ul.b li p::before {
    content: "=>";
    font-weight: bold;
    position: relative;
    left: -2.5rem;
    }

CSS

Task

Answer 1

嗨，您能检查一下对您有帮助吗？标记text-indent并更改ul.b li p ::在左位置之前添加 ul.b li p元素中的文本缩进

body {
    text-align: justify;
    hyphens: auto;
    margin-left: 3rem;
}  
.content {
    width: 40rem;
    background-color: yellow;
}  
p {
    width: 15rem;
    margin: auto;
    margin-top: 0.6rem;
    background-color: lightgreen;
    padding: 0;
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1.4rem;
    text-align: justify;
    hyphens: auto;
    word-break: break-word;
    padding: 5px;
}

ul {
    list-style-type: none;
    margin: 1rem;
    padding: 0;
}  
ul.b li p::before {
    content: "=>";
    font-weight: bold;
    position: relative;
    left: -10px;
}  
ul.b li p {
    text-indent: -22px;
}  
.bluetable {
    background-color: #9FF;
    border: 2px solid black;
}  
td {
    margin: 14rem;
    border: 1px dashed green;
}

CSS样式：位置之前？多余的空间

HTML

CSS

1 个答案: