水平浮动容器内的绝对定位元素？

我想水平位置有两个下拉菜单等一起一些文本：水平浮动容器内的绝对定位元素？

Text One : | I'm a dropdown |  Text Two: | I'm a second dropdown |

，其中“我是一个下拉菜单”元素绝对定位ul元素，最终将有一些JS作为下拉菜单。我最初认为HTML将像(Here is the JSFiddle)：与像CSS一起

<div id="wrapper" class="clearfix"> 
    <div> 
     Tet One 
    </div> 
    <div class="dropdown"> 
     <ul> 
      <li>I'm a dropdown</li> 
      <li>Value One</li> 
     </ul> 
    </div> 
    <div> 
     Text Two 
    </div> 
    <div class="dropdown"> 
     <ul> 
      <li>I'm a second dropdown</li> 
      <li>Value Two</li> 
     </ul> 
    </div> 
</div>

：

#wrapper > div{ 
    float: left; 
} 
#wrapper > div.dropdown{ 
    position: relative; 
} 
#wrapper > div > ul{ 
    position:absolute; 
    width: 100%; 
}

的结果是纯文本的div元素（“文本一”和“文本的两种” ）漂浮得很好，但相对定位的元素不能保持适当的宽度，并且将绝对定位的元素放置在彼此的顶部，即，一切都向左挤压。

a）这可以修复吗？

B）这是错误的做法，是有一个更好的（如使用display: inline-block？）

来源

2011-12-08 Timmy O' Mahony