html - css: display:inline-block and span with position:relative 构建多列下拉列表

Question

我尝试创建多列菜单 here (更新链接 为 HERE ):

我使用了 display: inline-block 策略来制作(水平)行。似乎它有效。 但是当我将它包装到 position:relative 附带的 span 时它停止工作。

<section>
    <button>123</button>
    <button>123</button>

    <span class="dropdown">
    <a href="#">*</a>    <!-- this is a link that should be inline with buttons -->

            <div class="menu">
                <div class="row">
                    <ul>
                        <li>11111111111111111111111111</li>
                        <li>1111111111111</li>
                        <li>111</li>
                    </ul>
                </div>
                <div class="row">
                    <ul>
                        <li>2222222222</li>
                        <li>222222222222222222222</li>
                    </ul>
                </div>
                <div class="row">
                    <ul>
                        <li>33</li>
                        <li>33</li>
                        <li>33</li>
                    </ul>
                </div>
            </div>    
</span>
</section>

span 中的 href 链接代表一个按钮或链接，我将在其中单击以显示菜单。 我必须在 span 中有相对位置才能使菜单相对于它出现在正确的位置。 (所有按钮和链接应该在同一水平线上)

问题:如何让它工作？

如果我将 span 更改为 div 并为其设置固定大小，如 width:600px(以及此宽度或多或少的菜单宽度使其按预期工作，这很奇怪)，但是/所以我希望它是span(没有特定/硬编码的宽度)。

更新:

我已经更新了我的示例，以展示它如何使用 span 作为 block 和按钮:http://jsfiddle.net/uz0do787/32/

只需添加一点以前演示中未显示的细节，以显示我想要的内容。 我希望所有按钮和 href 链接都在同一行，但将 span 设置为“display:block”会破坏该顺序。

Answer 1

只需添加 display:block至 span

参见 DEMO

查看为什么需要添加 display:block

The HTML <span> element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a element, but <div> is a block-level element whereas a <span> is an inline element.

来源: Mozilla Developer Network