Question

所以基本上我想将3行用作无序列表，所以我将它们包含在ul，li标记中

我希望第1行的某个部分继承一个span标记，但它使用粗线会导致所有3行继承该span标记，而不仅仅是第一行的一部分

<ul>
<span class="bold"><li class="type1">Ths line is bold and underlined</span> This is continuation of Line 1 but normal text</li>
<li class="type1">This is a normal line</li>
<li class="type1">This is a normal line</li>
</ul>

.bold {
  display: inline-block;
  font-weight: 900;
  text-decoration: underline;
}

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

li.type1 {
  padding-left: 1.3em; 
  text-indent: -1.3em;
}

li.type1::before {
  content: "彡 ";
  color: black; 
}

我知道有些人会建议对html第一行进行更改，以后我应该使用span标记，然后首先使用li标记-这确实解决了继承span标记的所有3行问题，但又引起了另一问题您可以轻松检查here

请为此提出建议

Answer 1

您不能在ul和li标签之间添加元素。 ul标签后必须是li标签。使用此结构-

.bold {
  display: inline-block;
  font-weight: 900;
  text-decoration: underline;
}

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

li.type1 {
  padding-left: 1.3em; 
  /*text-indent: -1.3em;*/
  position:relative;
}

li.type1::before {
  left: 0;
  content: "彡 ";
  color: black; 
  position: absolute;
}

<ul>
<li class="type1"><span class="bold">Ths line is bold and underlined</span> This is continuation of Line 1 but normal text</li>
<li class="type1">This is a normal line</li>
<li class="type1">This is a normal line</li>
</ul>

如何正确同时使用span和list标签

1 个答案: