ボタンを並べて並べますか？

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（クラス）、コンテンツ（クラス）の表示をすべてインラインに変更しましたが、それでも問題は解決しません。私は問題がポジションのプロパティかもしれないと思うが、私は確信していない。それが事実なら、plsはまた、ここで間違っていることを教えてくれます。

Answer 1

これは、あなたがすべて1行に

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

をあなたのボタンを示すでしょう。しかし、あなたは今、あなたの隠されたコンテンツが、強制ではない取得する方法の問題を抱えていますそれを表示することを選択すると、他の3行が表示されます。ここで

は、あなたが複数の閉じられていないボタンのタグを持っている、これまで

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

Answer 2

<button>タグを2行目と下端に閉じる必要があります。私はあなたのコードを修正しましたが、今はうまく動作しますか？アンカーの "＃"の周りにスピーチマークを追加しました。

<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;という2つのセレクタのうちの1つだけが必要なので、そのうちの1つを削除しました。サイドノートとして

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を使用していない限り）スペースなしの属性には必要ではないかもしれませんが、一貫性は重要です。良い習慣をつくることで、将来の多くの人為的なエラーを防ぐことができ、あなたが引用符を変更した場合は...

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

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

：あなたは、交互、二重/単一引用符は、HTMLとJSが混在している状況で好まれていることを見つけることができますこれらの例では、コード/マークアップがどのように解釈されるかを変更します。したがって、一貫性を保ちたい場合は、マークアップ用とJSコード用の2つを選択してください。しかし、二重引用符はJSでHTMLとシングルクォートで頻繁に使用されることがわかります。

UPDATE：JSONを含むdata- *属性を使用する場合、HTMLの二重引用符が問題になります。これは、上記で概説した「標準」とは反対に、私が見つけた最良の議論かもしれません。しかし、あなたはまだ、常にある種の引用符を持っている必要があり