Reputation: 231
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
Upvotes: 1
Views: 177
Reputation: 1
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>
Upvotes: 0
Reputation: 992
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>
Upvotes: 0
Reputation: 586
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.
Upvotes: -1
Reputation: 5458
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>
Upvotes: 2
Reputation: 375
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>
.
Upvotes: 0
Reputation: 400
Use this css
------------------------
#myForm form {
background-color: #E0E0E0;
text-align: left;
padding: 5px;
}
Upvotes: 1