并排对齐按钮

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>