css：display：inline-block和span与position：relative建立多列下拉列表

Question

我尝试在此处创建多列菜单（ 更新的链接为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>

在该HREF链接span表示一个按钮或链接，我会点击，使菜单出现。 我必须在跨度中具有相对位置，以使菜单相对于它出现在正确的位置。 （所有按钮和链接应在同一水平线上）

问题：如何使其工作？

尽管如果我将span更改为div并为其设置固定width:600px （如width:600px （并且此宽度或多或少是菜单宽度以使其像预期的那样工作，这很奇怪），它是可行的，但是/所以我想要它span （无特定/硬编码宽度）。

更新 ：

我已经更新了示例，以显示如何将span作为块和按钮使用： http : //jsfiddle.net/uz0do787/32/

只需添加一些以前的演示中未显示的细节，以显示我想要的内容。 我希望所有按钮和href链接都在同一行，但是使范围“ display：block”会破坏该顺序。

Answer 1

只需添加display:block ，以span

见演示

了解为什么需要添加display:block

HTML <span>元素是用于表达内容的通用内联容器，它本质上不代表任何内容。 它可以用于对元素进行分组以进行样式设置（使用class或id属性），或者因为它们共享属性值（例如lang）。 仅当没有其他语义元素合适时才应使用它。 <span>非常像一个元素，但是<div>是一个块级元素，而<span>是一个内联元素。

资料来源： Mozilla开发人员网络

Answer 2

你的意思是这样的？： 小提琴

.dropdown {
    position:relative;
    display: block;
    padding: 10px;
}

a {
   position:absolute;
   top: -15px;
   left: 100px;
    }

Answer 3

跨度-这是一个内联元素。 您不能使用内联元素包装代码块。 要使其与跨度一起使用，请添加“ display：block;” .dropdown的属性

喜欢：

.dropdown {
    position:relative;
    display: block;
}

Answer 4

我想如果通过切换到display:table来修复它，那么我可以继续使用span而不试图使其阻塞，并且它不会跳到下一行：

之前： http : //jsfiddle.net/uz0do787/32/

后

http://jsfiddle.net/uz0do787/34/

但是无论如何，我认为都存在重构的空间-菜单应该独立于js通过x，y显示，取决于范围/链接位置，以免DOM彼此之间以及不要那么脆弱。

我只是不明白，为什么当我应用“ display：table”（针对我提出的解决方案/答案）时，跨度会通过按钮保持在原位，而使用“ display：inline-block”时，跨度会中断菜单布局。 与内联块解决方案相比，display：table的工作原理与预期的一样。