将表单元素放置在新行上而无需<br>

Question

I'm trying to create a form to use for my work, I guess my question is more of a why does this happen.

<div class="checkbox">
   <input type="radio" name="transport_method" >Delivery
   <input type="radio" name="transport_method">Store Pick-Up
   <input type="radio" name="transport_method" >Day Trip
</div>

my css class of "checkbox" looks like this

.checkbox {
   float: left;
   display: inline;
}

now my code at the next element

<div>First name:<br>
    <input type="text" name="firstname"><br>
</div><br><br><br>

I have to add 3 <br> 's to get the "First name:" to be on a new line. I started with only 2 radio buttons and then I only needed 2 <br> 's. Is there a way to format my css to not need any <br> 's?

I think I need the <br> 's (correct me if I'm wrong) due to the fact that html file is reading the radio buttons as new lines and displaying them on one line, therefore the <br> 's fix that issue, but I don't like using them nor do I think it is semantically correct.

Answer 1

Try like this: Demo

<div class="checkbox">
    <input type="radio" name="transport_method">Delivery
    <input type="radio" name="transport_method">Store Pick-Up
    <input type="radio" name="transport_method">Day Trip</div>
<div class="clear"></div>
<div>First name:
    <input type="text" name="firstname">
</div>

.clear{clear:both} instead of <br/>

EDIT: If you dont want to create new class you can use like this too :

Updated dmo

.checkbox::after {
    display:block;
    clear:both;
    content:"";
}

Answer 2

Let's start with a nicely marked up form

The form elements

• The radio buttons can be wrapped in a <fieldset> element

• The labels can all be marked up with <label> elements . The for attribute links to its input via the matching id attribute . One benefit of this is that users can click/touch on the label.

That gives us this:

<form>
  <fieldset class="checkbox">
    <input type="radio" name="transport_method" id="delivery">
    <label for="delivery">Delivery</label>

    <input type="radio" name="transport_method" id="pick-up">
    <label for="pick-up">Store Pick-Up</label>

    <input type="radio" name="transport_method" id="day-trip">
    <label for="day-trip">Day Trip</label>
  </fieldset>
  <fieldset class="names">
    <label for="firstname">First name:</label>
    <input type="text" name="firstname" id="firstname">

    <label for="lastname">Last name:</label>
    <input type="text" name="lastname" id="lastname">
  </fieldset>
</form>

Bring each text input onto a new line

The default display value for inputs is display: inline which brings them all onto one line. Use display: block on text inputs to knock them down:

input[type=text] {
  display: block;
}

We want the radio buttons to remain on the one line, so they can be left at their default display: inline . More information on display .

Full example

Bring it all together with a little bit more CSS:

 input[type=text] { display: block; margin: 5px 0; } input[type=radio] + label { margin-right: 10px; } label, input[type=radio] { cursor: pointer; } fieldset { border: none; } form { background: #FFF9C4; width: 500px; font-family: sans-serif; } 

 <form> <fieldset class="checkbox"> <input type="radio" name="transport_method" id="delivery"> <label for="delivery">Delivery</label> <input type="radio" name="transport_method" id="pick-up"> <label for="pick-up">Store Pick-Up</label> <input type="radio" name="transport_method" id="day-trip"> <label for="day-trip">Day Trip</label> </fieldset> <fieldset class="names"> <label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname"> <label for="lastname">Last name:</label> <input type="text" name="lastname" id="lastname"> </fieldset> </form> 

Answer 3

<div class="checkbox">
    <input type="radio" name="transport_method" >Delivery
    <input type="radio" name="transport_method">Store Pick-Up
    <input type="radio" name="transport_method" >Day Trip
</div>
<div class="clear"></div>     
<div>
  First name:
  <br>
  <input type="text" name="firstname"><br>
</div>
<div class="clear"></div>

in css

.clear{
clear:both
}

Answer 4

It's as simple as this:

.checkbox{display:block}

And if you mean to have those checbox inputs floated to left, then use

.checkbox input{display:inline-block}

And there you go, no floats, no br tags, nothing weird

Answer 5

Using the new class amit made

use .clear{clear:both} instead of

on the following element, in my case

<div >First name:<br>
     <input type="text" name="firstname"><br>
</div>

turned into

<div class="clear">First name:<br>
      <input type="text" name="firstname"><br>
</div>