align input boxes in contact form 7

4 Views

I am trying to align input boxes in contact form 7 in wordpress. At the moment they are staggered. What can I do align them vertically. 

<div style="background-color:green">
    <div style="text-align: center;color:white">Heading</div>

    <div style="margin-bottom:5px"><div style="color:white; position:relative; display:inline-block;padding-right:10px;padding-left:10px;">Name:</div>
    <div style="position:relative; display:inline-block; ">[text* your-name]</div></div>

    <div style="margin-bottom:5px"><div style="color:white; position:relative; display:inline-block;padding-right:10px;padding-left:10px;">Surname:</div>
    <div style="position:relative; display:inline-block;margin-right:5px;">[text* your-name]</div></div>

    <div style="margin-bottom:5px"><div style="color:white; position:relative; display:inline-block;padding-right:10px;padding-left:10px;">Email:</div>
    <div style="position:relative; display:inline-block;margin-right:5px;">[text* your-name]</div></div>
</div>
Post Views: 4

Related posts

Leave a Reply

1 comment

  1. You need to give the input fields a parent.

    Then once they have a parent you can give the label(text) and input(text field) certain widths to make them occupy 100% or almost 100% of the form’s width to make then align elegantly.

    Here is the html:

    <div style="background-color:green">
<div style="text-align: center;color:white">Heading</div>
    <form id="contact">
        <label>Name:</label>
        <input type="text" />
        <label>Surname:</label>
        <input type="text" />
        <label>Email:</label>
        <input type="text" />
    </form>
</div>

    Here is the css:

    #contact {
    width: 50%;
}

#contact input, #contact label {
    display: inline-block;
}

#contact label {
    width: 30%;
}

#contact input {
    width: 65%;
}

    Finally, a fiddle: Demo