CSS - 如何对齐单选按钮？

Question

This is my HTML form code:

<div id="myForm">
        <form action="<?php echo $__SERVER["PHP_SELF"];?>" method="post">
            <table>
                <input type="radio" name="tableNames" value="<?php echo $tempName; ?>" > <?php echo $tempName ?> <br/>

                <tr> 
                    <td><input type="submit" value="submit"></td>
                    <td><input type="reset" value="reset"></td>
                </tr>
            </table>
        </form>
    </div>

this is my current css:

#myForm {
    margin: auto;
    width: 700px;
}
#myForm form {
    background-color: #E0E0E0;
    text-align: center;
    padding: 5px;
}
#myForm table {
    margin: auto;
    width: 60%;
    padding: 15px;
}

this is what my form looks like right now: How can i align the radio button's buttons

Answer 1

you could wrap the inputs in a div, then center that div and give it text-align left.

 #myForm { margin: auto; width: 700px; } #myForm form { background-color: #E0E0E0; text-align: center; padding: 5px; } #myForm table { margin: auto; width: 60%; padding: 15px; } .test { width: 300px; margin: 0 auto; text-align: left; }

 <div id="myForm"> <form method="post"> <table> <div class="test"> <input type="radio" name="tableNames" value="asdasd123123">asdasdasd <br/> <input type="radio" name="tableNames" value="asd">asdasdasd <br/> <input type="radio" name="tableNames" value="asdasdasdas?>">123 <br/> <input type="radio" name="tableNames" value="123123123123">asdasdasd1231231231231231231231 <br/> </div> <tr> <td> <input type="submit" value="submit"> </td> <td> <input type="reset" value="reset"> </td> </tr> </table> </form> </div>

Answer 2

Use this css

------------------------  

 #myForm form {
    background-color: #E0E0E0;
    text-align: left;
    padding: 5px;
}

Answer 3

I'm not seeing where the multiple radio boxes are being generated, but I suggest placing all of them within the same TD if you want to continue to use a table to organize content.

Otherwise, you could place a second <div> tag inside the <div> you already have, and set custom dimensions for the width, padding, margin of this inner <div> .

Answer 4

 label,input{ float:left; }

 <div id="myForm"> <form action="" method="post"> <table> <input type="radio" name="tableNames1" value="1"><label>1</label> <input type="radio" name="tableNames2" value="2"><label>2</label> <input type="radio" name="tableNames3" value="3"><label>3</label> <input type="radio" name="tableNames4" value="4"><label>4</label> <br/> <tr> <td> <input type="submit" value="submit"> </td> <td> <input type="reset" value="reset"> </td> </tr> </table> </form> </div>

Answer 5

It's gonna be a bit messy, but I've think I found the right solution.

Something like this: JS Fiddle

 #myForm { margin: auto; width: 700px; } #myForm form { background-color: #E0E0E0; padding: 5px; } #myForm table { margin: auto; width: 60%; padding: 15px; text-align: center; } .radio_holder{ width: 45%; display:inline-block; } .radio_label_holder { display:block; text-align: right; } label{ width:53%; display:inline-block; text-align:left; } .all_radio{ display:block; margin:auto; width:60%; }

 <div id="myForm"> <form> <table> <span class="all_radio"> <span class="radio_label_holder"><span class="radio_holder"><input type="radio" id="administrators" name="tableNames" value="administrators" ></span> <label for="administrators">administrators</label></span> <span class="radio_label_holder"><span class="radio_holder"><input type="radio" id="bookings" name="tableNames" value="bookings" ></span> <label for="bookings">bookings</label></span> <span class="radio_label_holder"><span class="radio_holder"><input type="radio" id="rooms" name="tableNames" value="rooms" ></span> <label for="rooms">rooms</label></span> <span class="radio_label_holder"><span class="radio_holder"><input type="radio" id="customers" name="tableNames" value="customers" ></span> <label for="customers">customers</label></span> </span> <tr> <td><input type="submit" value="submit"></td> <td><input type="reset" value="reset"></td> </tr> </table> </form> </div>

Answer 6

You better place the radio button in <td>...</td>

<input type="radio" name="tableNames" value="<?php echo $tempName; ?>" > <?php echo $tempName ?> <br/>

become:

<td colspan='2' align='left'><input type="radio" name="tableNames" value="<?php echo $tempName; ?>" > <?php echo $tempName ?></td>

It's aligning with the html.