如何在li标记内的一行中显示范围内容？

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之间的空间。

要全屏查看，请查看小提琴：https://jsfiddle.net/nashcheez/s4tqwcmr/

参考代码：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

为你的li添加内联块，这将使它们具有特定的宽度，而不像内联元素......

＆＃13;

＆＃13;

Official Documentation

＆＃13;

ul
{
  list-style: none;
}
ul li{
  display: inline-block;
  width: 40%;
  margin: 10px;
}
ul li h2{
  display: inline-block;
  width:40%;
  vertical-align: top;
}
ul li span{
  display:inline-block;
  width:39%;
  vertical-align: top;
}
ul li button{
  display: inline-block;
  width: 19%;
  min-width: 60px;
  vertical-align: top;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

ul
{
	list-style: none;
}

ul li{
        width: 40%;
        display: -webkit-inline-box;
}
ul li h2{
	display: inline-block;
}

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;