html - 如何在li标签内一行显示span内容？

Question

我必须在 li 标记内的一行中显示 span 标记内容。你能帮我吗？

我得到这样的输出。

我需要这样的输出。

ul {
  list-style: none;
}

ul li {
  display: inline;
}

ul li h2 {
  display: inline-block;
}

<ul>
  <li>
    <h2>Lorem ipsum dolor sit</h2>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem </span>
  </li>

  <li>
    <h2>Lorem ipsum dolor sit</h2>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem </span>
  </li>
</ul>

Answer 1

您必须提供display: inline-block给您li , h2和span .

给你适当的跨度width这样它就可以容纳在 li 之间的空间内。 .

要全屏查看，请检查 fiddle :https://jsfiddle.net/nashcheez/s4tqwcmr/

引用代码:

ul {
  list-style: none;
}

ul li {
  display: inline-block;
  width: 49%;
}

ul li h2 {
  display: inline-block;
  margin: 0;
  height: 100%;
  vertical-align: top;
}

span {
  display: inline-block;
  width: 110px;
}

<ul>
  <li>
    <h2>Lorem ipsum dolor sit</h2>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem </span>
  </li>

  <li>
    <h2>Lorem ipsum dolor sit</h2>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tellus nisl, molestie vitae nibh nec, dictum dignissim dui.Lorem </span>
  </li>
</ul>