Home/ Questions/Q 6815929
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T20:51:55+00:00

How do I get two buttons to appear one above the other in a

  • 0

How do I get two buttons to appear one above the other in a span? The buttons should both be the same size also. I’ve tried vertical-align:middle and display:inline-block but with no success. The end goal is to have one list on the left, two buttons in the middle, and one list on the right. The buttons in the middle will be “Add” and “Remove” and move items between the two lists. I found this link but it was updated in 2004 and seems like a very poor way to do it. I’ve been searching for awhile and I must not be looking for the right things, so some guidance would be appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here two buttons are aligned one above the other.

    First between two lists:
    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>

    …and then between two spans:
    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>
    • 0