获取项目符号的第二行作为第一部分缩进-不在项目符号下方? [英] Get second line of bullet item to indent as first part - not underneath the bullet?

问题描述

当项目符号列表中的某个项目足够长以可以包装时，我需要将包装好的部分从第一行的左侧开始与第一行对齐，而不是从项目符号的下方开始.

When an item in my bulleted list is long enough to wrap, I need the wrapped part to line up on the left with the first line, starting to the right of the bullet, rather than starting underneath the bullet.

我该如何实现?

目前，我有以下代码.

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>

推荐答案

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

My take on this would be to include the bullet in another div and then wrap both divs in a container 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>

这将是使用无序列表的解决方案，如下所示:

And this would be the solution using unordered list, as seen here: 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>

这篇关于获取项目符号的第二行作为第一部分缩进-不在项目符号下方?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！