vendredi 22 avril 2016

How can I align the checkboxes in a form when using table display with CSS.

I need to align all my check boxes in a form. We are required to do the form with a table display and style it in CSS.
Here is my html for the form:

    <form action="" method="POST">
        <div class="tableRow">
        <p>
        Address: <input type="text" name="Address"></p><br></div>
        <div class="tableRow"><p>
        Phone: <input type="tel" name="Phone">
        </p></div>
        <div class="tableRow">
        <p>
        <select name="size">
            <option value="Medium">Medium</option>
            <option value="Large">Large</option>
            <option value="X-Large">X-Large</option>
        </select></p></div>
        <div class="tableRow">
        <p>Crust:
            <input type="radio" name="crust" value="Thin"> Thin <br>
            <input type="radio" name="crust" value="Regular"> Regular
        </p></div>
        <div class="tableRow">
        <p> Toppings:
            <input type="checkbox" name="toppings" value="Pepperoni"> Pepperoni<br>
            <input type="checkbox" name="toppings" value="Beef"> Beef <br>
            <input type="checkbox" name="toppings" value="Italian Sausage"> Italian Sausage <br>
            <input type="checkbox" name="toppings" value="Green Peppers"> Green Peppers <br>
            <input type="checkbox" name="toppings" value="Onions"> Onions <br>
            <input type="checkbox" name="toppings" value="Mushrooms"> Mushrooms <br>
            <input type="checkbox" name="toppings" value="Banana Peppers"> Banana Peppers <br>
            <input type="checkbox" name="toppings" value="Jalapenos"> Jalapenos <br>
            <input type="checkbox" name="toppings" value="Black Olives"> Black Olives <br>
        </p></div>
        <div class="tableRow">
        <p> Extras:
            <input type="checkbox" name="extras" value="Drink"> Drink <br>
            <input type="checkbox" name="extras" value="Breadsticks"> Breadsticks <br>
            <input type="checkbox" name="extras" value="Cheesesticks"> Cheesesticks <br>
        </p></div>
        <div class="tableRow">
        <p>
        <input type="submit" value="Place Order">
        </p></div>
    </form>

and here is my CSS

form {
    display: table;
}
div.tableRow {
    display: table-row;
}
Div.tableRow p {
    display: table-cell;
    vertical-align: top;
    padding: 3px;
}
div.tableRow p:first-child {
    text-align: left;
}
h1 {
    font-weight: bold;
    font-size: 16px;
}

When I run the browser this is how it looks
And this is how it is suppose to look




Aucun commentaire:

Enregistrer un commentaire