我有以下页面:
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/