CODEWITHSUNDEEP
htmlcss
Raf
Raf

Reputation: 684

How to properly align the span and input elements?

I want to align a <span> element and the <input> text element. The height of <input> and <span> should be the same, the top and bottom border should be on same line and the text inside the <input> and <span> elements should be on the same line.

.cnt {
  margin: 5px;
}
.one {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
.two {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
.in {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
input {
  padding: 0;
}
<div class="cnt">
  <label>
    <span class="one">Test in Span</span>
    <span class="two">Span in test</span>
  </label>
  <input class="in" value="mmmnnnxx" type="text" />
</div>

https://jsfiddle.net/ajo4boom/

How to do what I want?

Upvotes: 4

Views: 1601

Answers (5)

Laurence Lord
Laurence Lord

Reputation: 92

Many of the native properties of inputs will be different from those of spans. First up, you might also like to normalise border, font-family, font-size, line-height and padding.

To take advantage of the height property, define display: inline-block on both elements. Also, box-sizing: content-box will ensure they have the same box-sizing, meaning the way padding and borders will affect their height and width. 

.one, .two, .in {
  box-sizing: content-box;
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
  display: inline-block;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 18px;
  padding: 2px;
}
<div class="cnt">
  <label>
    <span class="one">Test in Span</span>
    <span class="two">Span in test</span>
  </label>
  <input class="in" value="mmmnnnxx" type="text" />
</div>

Upvotes: 2

TrampolineTales
TrampolineTales

Reputation: 826

I've found success by using an external stylesheet such as normalize.css. They're very useful for making sure your tags stay aligned across all browsers.

Another solution would be to do the following:

.cnt {
  margin: 5px;
}
.one {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
.two {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
.in {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
}
input {
  position: relative;
  top: -1px;
  padding: 0;
}
<div class="cnt">
  <label>
    <span class="one">Test in Span</span>
    <span class="two">Span in test</span>
  </label>
  <input class="in" value="mmmnnnxx" type="text" />
</div>

Simply offset the <input> by adding

input {
    position: relative;
    top: -1px;
}

More info on relative positioning in CSS.

Upvotes: 3

andreas
andreas

Reputation: 16936

Here's a possible solution using display: inline-block;, line-height and vertical-align, but it's like @Leeish commented:

Height's are tough with inputs because browsers all like to do their own thing

.cnt {
  margin: 5px;
}
label {
  display: inline-block;
}
input {
  padding: 0;
}
.one, .two, .in {
  background-color: #ffffff;
  border: solid 1px #ADADAD;
  height: 17px;
  display: inline-block;
  line-height: 17px;
  vertical-align: top;
}
<div class="cnt">
  <label>
    <span class="one">Test in Span</span>
    <span class="two">Span in test</span>
  </label>
  <input class="in" value="mmmnnnxx" type="text" />
</div>

Upvotes: 1

technico
technico

Reputation: 1172

You can use your browser toolkit or the mozilla extention : firebug, to help yourself finding the origin of the problem. You would see that only input was really 17px height. Spans were, in the browser reality, 19px height.

So defining your span height to 19px would also roughtly work.

Upvotes: 2

Rohit
Rohit

Reputation: 1802

Just add vertical-align to input.

Check: https://jsfiddle.net/ajo4boom/1/

Upvotes: 2

Related Questions