html - 在绝对容器内显示内联列表

Question

我尝试了很多方法来显示绝对容器持有的子列表内联位置，但都没有成功。我也曾尝试使用 div 替换子列表，但也不起作用。唯一有用的是使用表，但我真的不喜欢使用表。有什么建议吗？

ul.main > li {
	display: inline-block;
	position: relative;
	background: red;
}

.sub{
	position: absolute;
	left: 0;
	background: green;
}
ul..sub li {
	display: inline-block;
}

<ul class="main">
  <li>
    1

    <ul class="sub">
      <li>1.1.</li>
      <li>1.1.</li>
      <li>1.1.</li>
    </ul>
  </li>
  <li>2</li>
</ul>

Answer 1

ul.main > li {
	 display: inline-block;
	 position: relative;
	 background: red;
}

.sub{
	 position: absolute;
	 left: 0;
	 background: green;
 white-space:nowrap;
 padding:0;
 list-style:none
}
ul.sub li {
	 display:inline-block;
}

<ul class="main">
 <li>
   <span> 1</span>
     <ul class="sub">
       <li>1.1.</li>
       <li>1.1.</li>
       <li>1.1.</li>
    </ul>
 </li>
 <li>2</li>
</ul>