How to display inline “input” elements, surrounded by divs

Question

I have an HTML code, with 3 input fields :

  <div class="field" > <input placeholder="Firstname" class="firstname" id="firstname_field" name="firstname" size="30" value="" type="text" > </div> <div class="field" > <input placeholder="Lastname" class="lastname" id="lastname_field" name="lastname" size="30" value="" type="text" > </div> <div class="field" > <input placeholder="Email" class="email" id="email_field" name="email" size="30" value="" type="text" > </div> 

Currently, because they are surrounded by div's, they display in block : http://jsfiddle.net/k2Nqp/159/ I need the 2 first fields to display "inline" and not as block, and the 3rd one to stay as a block.

Easy if you put "display:inline-block" inside the div's. But the tricky part here, is that I don't have any control on this HTML code, as it's auto-generated by a shortcode. I can add CSS, using the already existing classes, or even javascript (I used javascript to insert the placeholder)

And since the 3 divs have the same class, they would display all block or all inline, so I can only work on the input fields. Unfortunately I tried specified "inline-block" to the input fields, and it's not working.

Any idea on how to make this work ? Thank you !

Answer 1

Use below CSS, to achieve your expected result

.field{
 display:inline; 
}
#email_field{
  display:block;
}

http://jsfiddle.net/Nagasai_Aytha/k2Nqp/164/

display:inline will allow all fields to be displayed in inline and display:block on third field , will make it block element and gets displayed in separate line

Answer 2

If you need to do this with a more complex set of fields i would suggest checking out the :nth-of-type() and :nth-child() css selectors.

 .field { display: inline-block; } .field:last-child { display: block; } 

 <div class="field" > <input placeholder="Firstname" class="firstname" id="firstname_field" name="firstname" size="30" value="" type="text"> </div> <div class="field" > <input placeholder="Lastname" class="lastname" id="lastname_field" name="lastname" size="30" value="" type="text"> </div> <div class="field" > <input placeholder="Email" class="email" id="email_field" name="email" size="30" value="" type="text"> </div> 

Answer 3

May be you can use nth-child() selector to align your div's

div:nth-child(1),div:nth-child(2) {
    display:inline;
}

Fiddle link

Read about nth-child

Answer 4

The below CSS rule will select all of the elements with the field class except for the last one and apply the display style with value inline-block .

.field:not(:last-child) {
  display:inline-block;
}