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 : / 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 !

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/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 !

• javascript
• html
• css

• jsfiddle/k2Nqp/161 – Jeremy Harris Commented Jul 15, 2016 at 19:26

4 Answers 4

Use below CSS, to achieve your expected result

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

http://jsfiddle/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

If you need to do this with a more plex 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>

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

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;
}