使强标签在ul标签中左对齐为li标签

Question

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

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

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

  

强标签中包含什么
• li标签   1
• li标签2

我想将强标签（Whats included in strong tag）的文本左对齐到li标签的位置。

除了在强标签中设置margin值外，还有其他方法可以这样做吗？

Answer 1

  private static final DatabaseReference POST_REF =
    FirebaseDatabase.getInstance().getReference("/Post");

   private final FirebaseQueryLiveData liveData = new 
   FirebaseQueryLiveData(POST_REF);
   @NonNull
   public LiveData<DataSnapshot> getDataSnapshotLiveData() {

return liveData;

}

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:"• ";
}

1. 使用<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>元素上的空白来代替<li>标签。
2. 使用文本缩进
3. 在<strong>标签或<li>标签上使用相对位置。
4. 在<strong>上使用绝对位置，在<strong>上使用相对位置
5. 使用文本对齐方式

Answer 2

不应在第一个li中设置它，因为这将假定与前li个元素具有同级关系，而标头在层次结构中更为重要。想象一下屏幕阅读器等

<strong>Strong Text!</strong> <ul> <li>Other text</li> </ul>！

Answer 3

您可以使用样式将强文本设置为li，以删除项目符号并将其左移。

.nobullet {
  list-style-type: none;
  margin-left: -15px;
}

<ul>
  <li class="nobullet"><strong>Strong Text!</strong></li>
  <li>Other text!</li>
</ul>