並排排列按鈕？

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個按鈕會被刪除。

這是迄今取得

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

Answer 2

您需要關閉第二行和最下面的<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> 

Answer 3

在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文檔類型），但一致性很重要 - 形成良好的習慣可以防止未來人爲錯誤，並且代碼稍後可以更容易修改。你會發現，交替雙/單引號在HTML和JS是混合的情況下優先考慮：

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

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

...如果你改變了報價在這些例子中的任何一箇中，它都會改變代碼/標記的解釋方式。所以，如果你想保持一致，選擇一個標記和一個JS代碼，然後堅持下去。儘管如此，我認爲你會發現在HTML中更經常使用雙引號，而使用JS中的單引號。

UPDATE：我只是想指出，如果您曾經使用包含JSON的data- *屬性，HTML中的雙引號就會成爲問題。這可能是我發現的與上述「標準」相反的最佳論據。但是，你還是應該總是有某種