html - 使强标签左对齐，如 ul 标签中的 li 标签

Question

我在 ul 标签中有一个 strong 标签，例如，

<ul>
    <strong>Whats included in strong tag</strong>
    <li>li tag 1</li>
    <li>li tag 2</li>
</ul>

结果显示在网站页面中，例如

Whats included in strong tag
• li tag 1
• li tag 2

我想让强标签的文本(强标签中包含的内容)左对齐到li标签的位置.

除了在strong标签中设置margin值，还有其他方法吗？

Answer 1

li.strong{
  list-style-type: none;
}
.li1{
  margin-left:30px;
}
.li2{
  text-indent: 30px;
  list-style-type:none;
}
.li2::before{
  content:"• ";
}
.li3{
  position:relative;
  left: 30px;
}
.strong4{
  position:absolute;
  left:0px;
}
.li4{
  position:relative;
  top:16px;
}
.li5{
  text-align:center;
  list-style-type:none;
}
.li5::before{
  content:"• ";
}

<ul>
    <li class="strong"><strong>Whats included in strong tag</strong></li>
    <li class="li1">li tag 1</li>
    <li class="li1">li tag 2</li>
</ul>

<ul>
    <li class="strong"><strong>Whats included in strong tag</strong></li>
    <li class="li2">li tag 1</li>
    <li class="li2">li tag 2</li>
</ul>

<ul>
    <li class="strong"><strong>Whats included in strong tag</strong></li>
    <li class="li3">li tag 1</li>
    <li class="li3">li tag 2</li>
</ul>

<ul>
    <li class="strong"><strong class="strong4">Whats included in strong tag</strong></li>
    <li class="li4">li tag 1</li>
    <li class="li4">li tag 2</li>
</ul>

<ul>
    <li class="strong"><strong>Whats included in strong tag</strong></li>
    <li class="li5">li tag 1</li>
    <li class="li5">li tag 2</li>
</ul>

1. 使用 <li> 上的剩余边距元素而不是 <strong>标签。
2. 使用文本缩进
3. 在 <li> 上使用相对位置标签或 <strong>标签。
4. 在 <strong> 上使用绝对位置和相对于 <li> 的位置
5. 使用文本对齐