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

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>

Answer 2

几乎就在那里：

＆＃13;

＆＃13;

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

ul.main > li > span{
    float:left;
    //display: inline-block;
}

.sub{
	
	background: green;
}
ul..sub li {
	display: inline-block;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

您可以尝试float:left或显示：inline-block方法