并排对齐按钮？

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（class）和内容（class）的显示全部更改为内联，但问题仍然存在。我认为问题可能出在属性位置，但我不确定。如果是这样，请也告诉我这里出了什么问题。

Answer 1

您需要在第二行和底部关闭 <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 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 文档类型），但一致性很重要 - 养成良好的习惯可以防止很多未来的人为错误，并且代码以后更容易修改。你会发现在 HTML 和 JS 混合的情况下，交替使用 double/single 引号是首选：

<button onclick="alert('hey');">
element.innerHTML = '<div class="my-div">hey</div>';

...如果您更改其中任一示例中的引号，它会更改 code/markup 的解释方式。所以，如果你想保持一致，选择一种用于标记，一种用于 JS 代码，然后坚持下去。不过，我认为您会发现双引号在 HTML 中更常用，单引号在 JS 中更常用。

UPDATE：我只是想指出，如果您曾经使用过包含 JSON 的 data-* 属性，HTML 中的双引号就会成为问题.这可能是我找到的与上述 "standard" 相反的最佳论据。但是，您仍然应该始终使用某种引号

Answer 3

这将使您在一行中显示所有按钮

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

但是您现在遇到的问题是，当您选择显示隐藏内容时，如何让其他 3 个内容不强制显示。

这是CSSmod到目前为止

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

并排对齐按钮？

Aligning buttons side by side?

html

css

display