html - 并排对齐按钮？

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;
 }