代码之家 › 专栏 › 技术社区 › David Gomes

使用自定义CSS内容处理列表项内的段落

css-content html-lists css html

David Gomes · 技术社区 · 7 年前

这是非样式列表项中段落的外观( <li>

<li>
  <p>
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
  </p>
</li>

但是,当使用自定义列表样式类型时,它看起来是这样的:

<li class="docs-test">
  <p>
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
  </p>
</li>

.docs-test {
  color: red;
  list-style-type: none;
}

.docs-test::before {
  content: '\2022 ';
  color: #828282;
  display: inline-block;
  margin-right: 10px;
}

.docs-test p {
  display: inline-block;
}

我知道对于这个特定的自定义列表样式类型,我可以使用列表样式图像。然而,我有其他的海关列表样式类型,我不能使用列表样式图像。

我如何才能使具有自定义CSS内容列表样式类型的列表项中的段落不跳到下一行的开头?目标是让这些自定义列表样式列表以与没有样式的常规列表相同的方式处理段落。

http://jsbin.com/kimilaniga/1/edit?html,css,output

1 回复 | 直到 7 年前

Marc Audet 7 年前

这里有一种实现你想要的风格的方法。

使用绝对定位来放置从 ::before 图左边缘左侧的伪元素 <li> 块元素。

position: relative .docs-test CSS规则,允许伪元素相对于 li

第二,添加 position: absolute 和适当的 top 和 left 偏移值以获得所需的样式。

您还需要重置 p

.docs-test {
  color: red;
  list-style-type: none;
  display: inline-block;
  position: relative;
}

.docs-test::before {
  content: '\2022 ';
  color: #828282;
  display: block;
  text-align: center;
  position: absolute;
  outline: 1px dotted gray; /* for demo only */
  width: 20px;
  left: -20px;
  top: 0;
}

.docs-test p {
  display: inline-block;
  margin: 0;
}

<ul>
  <li>
    <p>
      hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe
    </p>
  </li>

  <li class="docs-test">
    <p>
      hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe
      </p>
  </li>
</ul>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前