Question

我有一个HTML列表的问题，我正在努力用CSS设置样式。

问题是我想使用:before伪元素来设置我的list元素的样式，以便我可以这样做：

   |- Item 1
   |- Item 2
   |- Item four

为此，我使用了一些CSS，我使用:before指令在每个条目之前添加一些样式。源代码看起来有点像这样：

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <!-- and so on -->
</ul>

如此风格：

li:before 
{
    content: "";
    display: inline-block;
    width: 2em;
    height: 1em;
    position: relative;
    background-color: orange;

}

这可以按预期工作，但是当我得到一个长列表项时，我会得到这样的结果：

|- Item 1
|- Item 2
|- Item four number four fourth item item
 the fourth and so on.

我无法找到避免这种情况的方法，因此我将项目内容放入span中，因此我可以将其阻止为：

<ul>
  <li><span class='li-content'>Short content</span></li>
  <li><span class='li-content'>Long content long content long content long content long content</span></li>
   <li><span class='li-content'>Short content</span></li>
</ul>

我的完整样式表如下所示：

ul 
{
   width: 20em;
   list-style-type: none;
   border: 1px solid grey;
   padding: 1em;
}
li
{
   clear: both;
}
li:before 
{
    content: "";
    display: inline-block;
    width: 2em;
    height: 1em;
    position: relative;
    background-color: orange;

}
.li-content
{
     display: inline-block;
   /* position: absolute; */
}

但是现在我有一个问题，如果我做位置relative我得到了这个：

|- Short content
|-
 Long content long content long content 
 long content
|- Short content

然而，如果我将位置absolute与:before选择器正确对齐，但长内容直接显示在下一个列表项上，将字母变成混乱的混乱。有Fiddle here。

调整其他样式组件（例如float所有内容）似乎并未阻止这两种行为之一发生。我发现最接近的事情是在为max-width显示配置内容范围时设置block，但由于某种原因我的:before块会沉到底部。

|- Short content
   Long content long content long content 
|- long content
|- Short content

我可以做些什么来创造我拥有＆＃34;之前＆＃34;在我的文本内容之前阻止，无论我的列表项中有多少行文本，我的文本仍然在块的右侧缩进？

Answer 1

在伪元素上使用绝对定位，在跨度上使用左边距

JSfiddle Demo

<强> CSS

ul 
{
   width: 20em;
   list-style-type: none;
   border: 1px solid grey;
   padding: 1em;
}
li {
   clear: both;
   position: relative;
}
li:before {
    content: "";
    display: inline-block;
    top:0;
    left:0;
    width: 2em;
    height: 1em;
    position: absolute;
    background-color: orange;

}
.li-content {
    display: inline-block;
    margin-left: 2.5em; /* approx based on width of :before - YMMV */
}

CSS - list元素被推出位置：在指令之前

1 个答案: