如何让两个按钮在一个范围内一个显示在另一个上方？两个按钮的大小也应该相同。我试过 vertical-align:middle 和 display:inline-block 但没有成功。最终目标是左边有一个列表，中间有两个按钮，右边有一个列表。中间的按钮将是“添加”和“删除”并在两个列表之间移动元素。我找到了 this链接，但它于 2004 年更新，似乎是一种非常糟糕的方式。我已经搜索了一段时间，我一定不是在寻找正确的东西，所以一些指导将不胜感激。
最佳答案
这里有两个按钮一个在另一个上面对齐。
两个列表之间的第一个:
http://jsfiddle.net/xGXER/
<!DOCTYPE html>
<html>
<head>
<title>Buttons in between</title>
</head>
<body>
<ul style="background: #afa; display: inline-block; width: 100px; vertical-align: top;">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
<span style="display: inline-block; width: 70px; background: #6af; vertical-align: top;">
<button style="width: 70px;">Add</button>
<button style="width: 70px;">Remove</button>
</span>
<ul style="background: #afa; display: inline-block; width: 100px; text-align: right; vertical-align: top;">
<li>Ein</li>
<li>Zwei</li>
<li>Drei</li>
<li>Vier</li>
</ul>
</body>
</html>
...然后在两个跨度之间:
http://jsfiddle.net/JtXj2/
<!DOCTYPE html>
<html>
<head>
<title>Buttons in between spans</title>
</head>
<body>
<span style="background: #f06; vertical-align: top;">Foo bar has left the building</span>
<span style="display: inline-block; width: 70px; height: 52px; background: #06f;">
<button style="width: 70px;">Add</button>
<button style="width: 70px;">Remove</button>
</span>
<span style="background: #0f0; vertical-align: top;">Bar hopping is what we do at Friday nights</span>
</body>
</html>
关于html - 将两个按钮一个放在另一个的顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8158049/