水平浮動容器內的絕對定位元素？

我想水平位置有兩個下拉菜單等一起一些文本：水平浮動容器內的絕對定位元素？

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