Question

如何让两个按钮在一个范围内一个显示在另一个上面？按钮的尺寸也应相同。我尝试过vertical-align：middle和display：inline-block但没有成功。最终目标是在左侧有一个列表，在中间有两个按钮，右侧有一个列表。中间的按钮将是“添加”和“删除”，并在两个列表之间移动项目。我找到this链接，但它在2004年更新，看起来是一个非常糟糕的方法。我一直在寻找一段时间，我一定不会寻找合适的东西，所以一些指导意见将不胜感激。

Answer 1

这里两个按钮一个在另一个上方对齐。

首先在两个清单之间：
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>

Answer 2

span { display:block; }
span button { float: left; width:100px; height:100px; margin:10px; clear:left; }
span .clearingelement { clear:left; }

Answer 3

这看起来太简单了，但是 - 如果问题实际上是“如何在一个范围内让两个按钮在另一个上面出现？”，那么...我认为这是你的答案。

<span>
BUTTON 1<br />
BUTTON 2
</span>

修改

设置列表的宽度并浮动它：

<ul style="width:100px; float:left;"> <li>list item 1</li> <li>list item 2</li> </ul> button1 button2

Answer 4

span元素是内联显示元素。为什么不使用作为块元素的div元素？我没有看到样式span的行为与div

相似

Answer 5

内只有两个按钮吗？我想位于内，所以我希望这就是您所需要的：

http://jsfiddle.net/Gpt6a/

将两个按钮一个放在另一个的顶部

5 个答案: