How to align the range and input elements?

Question

I want to align an element <span>and a text element <input>. The height <input>and <span>must be the same, the upper and lower limits need to be on one line, and the text inside the elements <input>and <span>to be in one 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>

Run codeHide result

https://jsfiddle.net/ajo4boom/

How to do what I want?

Answer 1

I found success using an external style sheet such as normalize.css . They are very useful for ensuring that your tags support alignment 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>

Run codeHide result

<input>,

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

CSS.

Answer 2

vertical-align .

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

Answer 3

mozilla: firebug, . , 17px. , , 19px height.

, 19px .

Answer 4

. -, border, font-family, font-size, line-height padding.

To use a property height, define display: inline-blockfor both elements. In addition, it box-sizing: content-boxguarantees that they have the same box-sizing , that is, the way paddingand bordersaffect them heightand 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>

Run codeHide result

Answer 5

Here is possible to solve using the display: inline-block;, line-heightand vertical-align, but, as @Leeish, commented:

Height is tough with inputs because browsers all love 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>

Run codeHide result