CODEWITHSUNDEEP
htmlcss
user4164128
user4164128

Reputation:

Place input fields in a row to fit full container width

I try to put three input fields in a row, with a little bit of space next to each other, so it doesnt look odd. Anyway the third input always gets a new line, why is that and how to fix it?

What I want to achieve, see picture.

enter image description here

Html:

<div id="form">
<form>
    <input type="text">
    <input type="text">
    <input type="text">
</form>
</div>

Css:

#form{
width: 600px;
border: 1px solid black;
}

#form input {
width: 33.33%;
display: inline-block;
margin: 0 1.1% 0 0;
padding: 0;
}

Upvotes: 1

Views: 1718

Answers (3)

Talmid
Talmid

Reputation: 1401

Reduce the width percentage of your inputs. Those percentages add with the margin.

#form {
  width: 600px;
  border: 1px solid black;
}
#form input {
  width: 31.63%;
  display: inline-block;
  margin: 0 1.1% 0 0;
  padding: 0;
}
#form input:last-child {
  margin-right: 0
}
<div id="form">
  <form>
    <input type="text">
    <input type="text">
    <input type="text">
  </form>
</div>

Or, if you can support flex layout, this is the cleanest. Margin is not needed because justify-content: space-between handles spacing as long as the input percentages allow for it (add to < 100%).

#form > form {
  width: 600px;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
}
#form input {
  width: 31%;
}
<div id="form">
  <form>
    <input type="text">
    <input type="text">
    <input type="text">
  </form>
</div>

Upvotes: 1

vsync
vsync

Reputation: 130700

http://jsbin.com/locakediji/1/edit?html,css,output

CSS:

#form{
  width: 600px;
  border: 1px solid black;
  text-align:justify; // added
}

form::after{ content:''; width:100%; display:inline-block; } // added

#form input {
  width: 28%;
  display: inline-block;
  padding: 0;
}
<div id="form">
  <form>
    <input type="text">
    <input type="text">
    <input type="text">
  </form>
</div>

Upvotes: 0

Alex Char
Alex Char

Reputation: 33228

One solution is to use display: flex to form:

#form {
  width: 600px;
  border: 1px solid black;
}
#form input {
  width: 33.33%;
  display: inline-block;
  margin: 0 1.1% 0 0;
  padding: 0;
}
form {
  display: flex;/*Add display flex*/
}
form input:last-child {
  margin-right: 0 !important;/*remove margin-right from last input*/
}
<div id="form">
  <form>
    <input type="text">
    <input type="text">
    <input type="text">
  </form>
</div>

Also you can remove margin-right from last input.

Upvotes: 1

Related Questions