Question

我尝试创建多列菜单here（更新后的链接是HERE）：

我使用display: inline-block策略制作（水平）行。似乎它有效。但是当我将其包装到span附带的position:relative时，它就会停止工作。

<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更改为div并为其设置固定大小width:600px（并且此宽度大于或等于菜单宽度）它工作得像预期，这很奇怪），但/所以我希望它是span（没有特定/硬编码的宽度）。

更新：

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

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

Answer 1

只需将display:block添加到span

即可

请参阅DEMO

了解您需要添加display:block

的原因

HTML <span>元素是用于措辞的通用内联容器内容，本质上不代表任何东西。它可以使用为样式目的分组元素（使用类或id 属性），或者因为它们共享属性值，例如lang。它只有在没有其他语义元素合适时才应该使用。 <span>非常类似于元素，但<div>是块级别元素，而<span>是内联元素。

来源：的 Mozilla Developer Network

Answer 2

你的意思是这样的吗？：Fiddle

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

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

Answer 3

跨度 - 这是一个内联元素。你不能用内联元素包装块。要使其与span一起使用，请添加＆＃34; display：block;＆＃34;物业到.dropdown

像：

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

Answer 4

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

在： http://jsfiddle.net/uz0do787/32/

在

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

但无论如何，我认为有一个重新分解的空间 - 菜单应该是独立的，以xs为单位显示x，y取决于跨度/链接位置，以便DOM不那么可靠彼此而不是那么脆弱。

我只是不明白，为什么当我应用“display：table”（关于我提出的解决方案/答案）时，跨度会停留在按钮上，但是使用“display：inline-block”，span会打破菜单布局。是什么使显示：表与预期相比内联块解决方案。

css：display：inline-block和span with position：相对于构建多列下拉列表

4 个答案: