CODEWITHSUNDEEP
htmlcss
nanjero echizen
nanjero echizen

Reputation: 231

CSS - How can I align my radio buttons?

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: radio buttons How can i align the radio button's buttons

Upvotes: 1

Views: 177

Answers (6)

Tobias Bay-Larsen
Tobias Bay-Larsen

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

afuc func
afuc func

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

Peternak Kode Channel
Peternak Kode Channel

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

Nitsan Baleli
Nitsan Baleli

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

Sami Fouad
Sami Fouad

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

Govind jha
Govind jha

Reputation: 400

Use this css

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

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

Upvotes: 1

Related Questions