我有以下页面:

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(类)和content(类)的显示全部更改为内联,但是问题仍然存在。我认为问题可能出在位置属性上,但我不确定。如果这样的话,请告诉我这里出了什么问题。

最佳答案

这将使您在一行上全部显示按钮

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

但是您现在遇到的问题是,当您选择隐藏内容时,如何使隐藏内容不迫使其他3个内容向下一行。

这是到目前为止制作的CSS mod

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

关于html - 并排对齐按钮?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38377474/

10-11 12:53
查看更多