Question

css,绝对定位自适应宽度问题

<style>
*{
margin:0px;
padding:0px;
}
ul{
position:absolute;
}
#ul1{
width:auto;
background:green;
float:left;
}
#ul2 li{
float:left;
list-style:none;
background:blue;
}
</style>
<div style="width:200px;height:200px;background:red;position:relative">
<ul id="ul1">
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
</ul>
<ul id="ul2">
<li>bbb</li>
<li>bbb</li>
</ul>
</div>

红大块相对定位，绿蓝ul绝对定位，绿ul跟着内容大小自适应宽度！蓝ul怎么自适应在绿ul右边？
蓝ul，left：30px;不能这样这样写死。 绿自适应宽度的，绿变100px宽度，绿也要自适应在（绿ul）有右边怎么写？下面这种效果！

怎么写，不用js的话！
#ul2{ //绿ul
left=#ul1.width ????????????????????
}





Answer 1

在两个ul的外面再套上一个层，把这个层设为绝对定位的，两个ul则设为静态并且向左浮动的，就能实现你要的效果了：

<style>
*{
margin:0px;
padding:0px;
}
.box{
position:absolute;
}
#ul1{
background:green;
float:left;
}
#ul2 {
background:blue;
float:left;
}
#ul2 li{
list-style:none;
float:left;
}
</style>
<div style="width:200px;height:200px;background:red;position:relative">
<div class=box>
<ul id="ul1">
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
</ul>
<ul id="ul2">
<li>bbb</li>
<li>bbb</li>
</ul>
</div>
</div>

Answer 2

首先，确定你这么写CSS，是不可能达到你要的效果的，因为感觉你不理解绝对定位。当你给了UL绝对定位时，两个ul的top、left都为0了，而且绿色的ul宽度不是固定的，所以用CSS实现不了。你想用简单的方法解决问题是好想法，但是不要脱离实际。

Answer 3

没看懂你是什么意思，就按我看懂的意思 告诉吧

你用 height:auto； 看看