并排排列按钮？

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中的双引号就会成为问题。这可能是我发现的与上述“标准”相反的最佳论据。但是，你还是应该总是有某种