获得第二行子弹项目作为第一部分缩进 - 而不是在子弹下面？

Question

当我的项目符号列表中的项目足够长以包裹时，我需要包裹的部分在左边与第一行对齐，从子弹的右边开始，而不是从子弹下面开始。

我怎样才能做到这一点？

目前，我已获得以下代码。

CSS 和 HTML

＆＃13;

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我对此的看法是将子弹包含在另一个div中，然后将两个div包装在容器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

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

li {
  padding-left: 1em; 
  text-indent: -0.8em;
}

li::before {
  content: "■ ";
  color: red; /* or whatever color you prefer */
}

<ul>
  <li>Long long long long long long long long long long long long long long long long long long lng long long long long long long title
  </li>
</ul>

Answer 2

我会考虑一个相关的案例，你不能使用UL来处理悬挂缩进：复选框。

复选框总是显示悬挂缩进。令人惊讶的是，没有为此提供支持。但无论如何......

老派的方式是一张桌子。这有效，但可能会冒犯纯粹主义者。

Aydin使用CSS text-indent属性可以与块元素一起使用，其内容以<input type="checkbox" />开头。请注意，它不必是div。任何样式为块的元素都可以。也可以使用glyphicons（Bootstrap）并自己处理用户输入事件。如果你想这样做但仍然使用数据绑定，那么设置<input type="hidden">的值，你可以绑定它。请注意，在以编程方式设置值时，您可能需要显式触发绑定更新。