Question

我想水平放置一些文字以及两个下拉菜单，如：

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

其中'我是下拉列表'元素是绝对定位的ul元素，最终会有一些JS作为下拉菜单。我最初认为HTML会像(Here is the JSFiddle)：

<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>

和CSS一样：

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

结果是纯文本div元素（'Text One'和'Text Two'）漂浮得很好，但是相对定位的元素没有保持适当的宽度和绝对定位的{{1元素放在彼此的顶部，即一切都被压扁到左边。

a）可以修复吗？

b）这是错误的做法，是否有更好的方法（比如使用ul？）

Answer 1

做了一些改进 http://jsfiddle.net/cvZfF/74/

这是首发球员

http://jsfiddle.net/cvZfF/56/

你需要所有内容都是相对的，而不是绝对的; OnClick使用JavaScript克隆UL（在我的例子中为jQuery）并将其显示在原始位置。其余的由你决定。

Answer 2

我最后通过使用inline-block outter div来解决这个问题，将每个绝对定位的ul放在一个相对div包装器中，如下所示：

http://jsfiddle.net/timmyomahony/tGn6m/

经过反思，我没有很好地提出这个问题，所以请那些花时间回答的人道歉。

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

2 个答案: