Cant get input text boxes and buttons the same size

Admin 1
Viewed 4017

I'm trying to create a form with input text boxes and submit boxes being perfectly lined up and equal in size. However for some reason the submit button is a few pixels out of alignment and I cant figure out the cause.

The elements are the same size and I've tried removing margins and paddings but havent been able to resolve the issue.

I've created a simple jfiddle to illustrate my problem. https://jsfiddle.net/peacefulgoldfish/d50h7n9p/26/

Appreciate any help and advice on this.

html

<div>
<form>
<input>
<br>
<input>
<br>
<input type="submit">
</form>
</div>

css

#div{

  width:100%;
}

form{

  text-align: center;

}

input {
   box-sizing: border-box;
  height: 10%;
  width: 50%;

}
submit-button forms css html
5 Answers

Update your css may be this can help you.

#div{

  width:100%;
}

form{

  text-align: center;

}

input {
    height: 10%;
    width: 50%;
    display: block;
    margin: 0 auto;

}
body{
  box-sizing: border-box;
}
user_86767240

You must specify the box-sizing of the input to make all of them equal width. Here whats your updated CSS should look like: 

div {
  font-size:0;
}
#form{  
  text-align: center;
  font-size: 14px;
}
input {
  height: 10%;
  width: 50%;
  box-sizing: border-box;
}
user_78732290

You can achieve by using flex

form{

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-items:center

}

But you have to deal with extra space if you dont need it

user_79517740

Box Sizing is the only valid solution for this problem. My personal suggestion is to use box-sizing: border-box; for all elements.

Like This :

  • { box-sizing: border-box; }

Here * selects all elements in the current DOM.

* {
 box-sizing: border-box;
}
#form {
  text-align: center;
}

input {
  height: 10%;
  width: 50%;
}
<body>
    <form>
      <input>
      <br>
      <input>
      <br>
      <input type="submit">
    </form>
</body>

user_73745460

Here is wrapper

div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
<div>

<form>
<input><br/>
<input><br/>
<input type="submit">
</form>
</div>

user_26308170
Related