How to put two buttons side by side

Question

How to put two buttons side by side

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

2

I do not understand as much about HTML and CSS as I would like and need to make a small change on a site where I'm limited, so I did it here.

<div>
    <div>
        <a class="button" href="(LINK)" style="float: right; border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Abra sua conta</a></div>
    <div>
        <a class="button" href="(LINK)" style="float: center; border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Minha conta</a></div>
</div>
<p>

The buttons are okay, just one overlapping the other, and I need them to stay side by side. Can anyone help me with a solution to this?

html css button inline

asked by anonymous 16.03.2018 / 15:56

3 answers

1

The ideal is to continue using div's. Take out the float styles of the buttons and add a style to your div's.

.floatLeft{float:left};

<div>
    <div>
        <a class="button floatLeft" href="(LINK)" style="border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Abra sua conta</a></div>
    <div>
        <a class="button floatLeft" href="(LINK)" style="border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Minha conta</a></div>
</div>

16.03.2018 / 16:10

1

Young first Float:center does not exist! We only have Float:left and Float:right Documentation about Float in CSS

But my answer does not use either (remove floats) . To solve your problem, simply put display:inline-block into div

div > div {
    display: inline-block;
}

<div>
    <div>
        <a class="button" href="(LINK)" style=" border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Abra sua conta</a>
    </div>
    <div>
        <a class="button" href="(LINK)" style=" border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Minha conta</a>
    </div>
</div>

16.03.2018 / 16:14

Configure list-group with scrollspy bootstrap Why does a function invoked by onclick not influence commands external to it?

score 0 · Accepted Answer

Putting this inside a table should work:

<div>
    <table>
        <tr>
        <td>
            <div>
                <a class="button" href="(LINK)" style="float: right; border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Abra sua conta</a>
            </div>
        </td>
        <td>
            <div>
                <a class="button" href="(LINK)" style="float: center; border:1px solid; padding: 11px 21px; vertical-align: middle; background:#2D888F; color:white;border-radius:6px; font-size: 20px; font-family:helvetica, serif;text-decoration:none;">Minha conta</a>
            </div>
        </td>       
        </tr>
    </table>
</div>