CSS to force inline input fields

Question

I have the following code and I am unable to access the HTML to edit.

<form>
   <div class="LoginDiv">
      <input type="text" name="user_login" tabindex="1" placeholder="Email"/>
   </div>
   <div class="LoginDiv">
      <input type="password" name="user_password" tabindex="2" placeholder="Password" />
   </div>
   <button type="submit">LOGIN</button>
</form>

This displays as per the image.

I am able to access the CSS and I would like to be able to force the input fields so they are inline.

Is this possible?

Thanks,

John

what exactly you want to happen? inputs and button are inline? in one straight line? — Undecided Dev
– Undecided Dev, Commented Jul 21, 2016 at 8:22

Corentin Branquet · Accepted Answer · 2016-07-21 08:24:46Z

2

Here's what you need I guess

.LoginDiv {
  display: inline-block;
 }

https://jsfiddle.net/21o0uL52/

answered Jul 21, 2016 at 8:24

Corentin Branquet

1,5864 gold badges17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sagar Kodte · Accepted Answer · 2016-07-21 08:24:46Z

1

You can use float:left on input and added button in div with class submit. By using clear:both avoided to float

form input{
 float:left;
}
.submit{
  clear:both;
}

<form>
   <div class="LoginDiv">
      <input type="text" name="user_login" tabindex="1" placeholder="Email"/>
   </div>
   <div class="LoginDiv">
      <input type="password" name="user_password" tabindex="2" placeholder="Password" />
   </div>
   <div class="submit"><button type="submit">LOGIN</button></div>
</form>

answered Jul 21, 2016 at 8:24

Sagar Kodte

3,8154 gold badges27 silver badges55 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

You can give the float: left to the class of these div's, something like this:

.LoginDiv {
  float: left;
}

<form>
  <div class="LoginDiv">
    <input type="text" name="user_login" tabindex="1" placeholder="Email" />
  </div>
  <div class="LoginDiv">
    <input type="password" name="user_password" tabindex="2" placeholder="Password" />
  </div>
  <button type="submit">LOGIN</button>
</form>

jsFiddle

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 21, 2016 at 8:23

ReshaD

9463 gold badges18 silver badges30 bronze badges

Comments

Undecided Dev · Accepted Answer · 2016-07-21 08:26:04Z

0

You can use inline table and table cell.

display:inline-table;

See fiddle https://jsfiddle.net/mLjh8230/

answered Jul 21, 2016 at 8:26

Undecided Dev

8306 silver badges16 bronze badges

Comments

Mikel · Accepted Answer · 2016-07-21 08:34:40Z

0

You only must use display: inline. EDITED

div{
  display: inline;
}

<form>
   <div class="LoginDiv">
      <input type="text" name="user_login" tabindex="1" placeholder="Email"/>
   </div>
   <div class="LoginDiv">
      <input type="password" name="user_password" tabindex="2" placeholder="Password" />
   </div>
   <button type="submit">LOGIN</button>
</form>

JSFIDDLE

edited Jul 21, 2016 at 8:34

answered Jul 21, 2016 at 8:23

Mikel

3053 silver badges14 bronze badges

3 Comments

Clyde Lobo Over a year ago

The OP has mentioned that he does not have access to edit the html

Mikel Over a year ago

Good observation! Edited

Clyde Lobo Over a year ago

It would bad to make the div inline. They can be other divs on the page and they might get inlined too, breaking the page

Collectives™ on Stack Overflow

CSS to force inline input fields

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related