css 是否将项目符号项的第二行作为第一部分缩进-不在项目符号下面？

gpnt7bae 于 2023-03-05 发布在其他

关注(0)|答案(3)|浏览(129)

当我的项目符号列表中的一个项目长到足以换行时，我需要换行的部分与第一行在左边对齐，从项目符号的右边开始，而不是从项目符号的下面开始。
我怎样才能做到这一点？

现在我有下面的代码。

- CSS和HTML**

.row2 {
      padding: 20px 20px 5px 20px;
      height: auto;
      overflow: hidden;
	  max-width: 500px; }

    .red-square-5 {
      width:5px;
	  height:5px;
	  background:#f00;
	  display:inline-block; }

<div class="row2">
<p><div class="red-square-5"></div>&nbsp;&nbsp;Long long long long long long long long long long long long long long long long long long long long long long long long long title</p>
</div>

css

来源：https://stackoverflow.com/questions/46146476/get-second-line-of-bullet-item-to-indent-as-first-part-not-underneath-the-bull

3条答案

按热度按时间

iezvtpos1#

我对此的看法是将项目符号包含在另一个div中，然后将两个div都 Package 在容器div中。

.row2 {
    padding-left: 20px;
    overflow: hidden;
    max-width: 500px; 
}
.red-square-5 {
    position:absolute;
    width:5px;
    height:5px;
    margin-top: 0.5em;
    background:#f00; 
}

<div class="container-div">
    <div class="red-square-5"></div>
    <div class="row2">
        Long long long long long long long long long long long 
        long long long long long long long long long long long 
        long long long title
    </div>
</div>

这就是使用无序列表的解决方案，如下所示：How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags
一个二个一个一个

赞(0）回复(0）举报 2023-03-05

7vux5j2d2#

我将考虑一个相关的案例，在这个案例中，您不能使用UL来处理悬挂缩进：复选框。
复选框 * 总是 * 以悬挂缩进的形式出现。奇怪的是，没有对这一点的内置支持。但无论如何...
老派的方法是用table，这很有效，但可能会冒犯纯粹主义者。
Aydin对CSS text-indent属性的使用可以用于内容以<input type="checkbox" />开头的block元素。注意，它不一定是div。任何样式为block的元素都可以。也可以使用glyphicon如果你想这样做，但仍然使用数据绑定，然后设置一个<input type="hidden">的值，你可以绑定它。请注意，在以编程方式设置该值时，可能需要显式触发绑定更新。

赞(0）回复(0）举报 2023-03-05

egmofgnx3#

为了实现这一点，获得“长长久久长长久久长长久久长标题”行并添加此ASCII字符;“& n B s p ;“Source：&nbsp和HTML空间挑战和技巧
添加足够的量直到找到正确的位置。

赞(0）回复(0）举报 2023-03-05