並排對齊按鈕？

Question

我有以下頁面：

HTML：

<div class=main>
    <div class=bttn>
        <button>abcdef</div>
    <div class=content>
        <a href=#!>jksg</a>
        <a href=#!>jksg</a>
        <a href=#!>jksg</a>
        <a href=#!>jksg</a>
    </div>
</div>

<button>abcdef
    <button>abcdef
        <button>abcdef
            </div>

CSS：

button {
    border: 3px solid red;
    border-collapse: collapse;
    padding: 16px;
    background-color: blue;
    width: 25%;
    margin: 0px -1px 0px -1px display: inline;
}

.content {
    display: none;
}

.bttn + .content {
    display: none;
}

.bttn:hover + .content {
    display: block;
}

當您運行代碼時，第一個按鈕單獨出現在行上，而其余按鈕則並排布置在下一行。 我想如果我在其他按鈕上插入隱藏的div，也會發生同樣的情況。 有什么辦法可以改變嗎？ 我將按鈕（標簽），bttn（類）和內容（類）的顯示全部更改為內聯，但是問題仍然存在。 我認為問題可能出在位置屬性上，但我不確定。 如果這樣的話，請告訴我這里出了什么問題。

Answer 1

這將使您在一行上全部顯示按鈕

https://jsfiddle.net/2wwfxfqy/1/

但是您現在遇到的問題是，在選擇顯示隱藏內容時，如何使其不迫使其他3個顯示內容向下一行。

這是到目前為止制作的CSS mod

.main button,
.bttn button {
  float:left;
 }

Answer 2

並不是HTML中的所有標記都需要有結束標記，但是<button>絕對是其中之一。 而且，正如評論中指出的那樣，兩個選擇器中只有一個display: none; 是此代碼段所必需的，因此我刪除了其中一個。

 button { border: 3px solid red; border-collapse: collapse; padding: 16px; background-color: blue; width: 25%; margin: 0px -1px 0px -1px; display: inline; } .bttn + .content { display: none; } .bttn:hover + .content { display: block; } 

 <div class="main"> <div class="bttn"><button>abcdef</button></div> <div class="content"> <a href="#">jksg</a> <a href="#">jksg</a> <a href="#">jksg</a> <a href="#">jksg</a> </div> </div> <button>abcdef</button><button>abcdef</button><button>abcdef</button> 

附帶說明，我更改了HTML以包含引號。 沒有空格的屬性可能不是必需的（除非您使用的是XHTML doctype），但是一致性很重要-養成良好的習慣可以防止將來出現很多人為錯誤，並且以后代碼更容易修改。 您會發現在HTML和JS混合使用的情況下，雙引號/單引號交替使用是首選：

• <button onclick="alert('hey');">

• element.innerHTML = '<div class="my-div">hey</div>';

...如果您在上述兩個示例中都更改了引號，則會更改代碼/標記的解釋方式。 因此，如果您要保持一致，請選擇一種標記和JS代碼，然后堅持使用。 不過，我認為您會發現HTML中使用雙引號的頻率更高，而JS使用單引號的頻率更高。

更新 ：我只是想指出，如果您曾經使用包含JSON的data- *屬性，則HTML中的雙引號會成為問題。 這可能是我發現與上述“標准”相反的最佳論據。 但是，您仍然應該始終使用某種報價

Answer 3

您需要在第二行和底部關閉<button>標記。 我已經在下面糾正了您的代碼，現在對我來說還行嗎？ 我還在錨點中的“＃”周圍添加了語音標記。

<div class = main>
<div class = bttn><button>abcdef</button></div>
<div class = content>
<a href = "#">jksg</a>
<a href = "#">jksg</a>
<a href = "#">jksg</a>
<a href = "#">jksg</a>
</div>
</div>



<button>abcdef</button>
<button>abcdef</button>
<button>abcdef</button>