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的工作原理與預期的一樣。