How to place a div between 2 inputs, vertical alligned

Question

How can i put i div between 2 inputs, having same heights, vertical aligned? It sounds simple, and i don't understand why the following code don't work:

input{
    width: 35%;
    border: 1px solid #A7A7A7;
    display: inline-block;
    font-size: 11px;
    padding: 0 5px;
    line-height: 18px;
}
input:first-child{
    border-right: none;
}
input:nth-child(3){
    border-left: none;
}
#between_inputs{
    width: 10px;
    height: 18px;
    display: inline-block;
    background-color: white;
    border-top: 1px solid #A7A7A7;
    border-bottom: 1px solid #A7A7A7;
    line-height: 18px;
}

<input type="text" name="min" placeholder="min."/><div id="between_inputs"></div><input type="text" name="max"  placeholder="max."/>

Somehow the div is placed above the inputs? What is wrong?

VXp · Answer 1 · 2018-09-04T20:27:04.967

You can do it with the Flexbox:

.flex {
  display: flex; /* displays flex-items (children) inline */
}

input {
  width: 35%;
  border: 1px solid #A7A7A7;
  display: inline-block;
  font-size: 11px;
  padding: 0 5px;
  line-height: 18px;
}

input:first-child {
  border-right: none;
}

input:nth-child(3) {
  border-left: none;
}

#between_inputs {
  /* flex-grow: 1; recommended, grows and takes the remaining horizontal space */
  width: 10px;
  /* height: 18px; not necessary, flex-items have the same height by default */
  display: inline-block;
  background: Lavender; /* just for demo */
  border-top: 1px solid #A7A7A7;
  border-bottom: 1px solid #A7A7A7;
  line-height: 18px;
}

<div class="flex">
  <input type="text" name="min" placeholder="min.">
  <div id="between_inputs"></div>
  <input type="text" name="max"  placeholder="max.">
</div>

score 3 · Accepted Answer · answered Nov 26 '17 at 12:32

3

Add vertical-align to input:

input{
    width: 35%;
    border: 1px solid #A7A7A7;
    display: inline-block;
    font-size: 11px;
    padding: 0 5px;
    line-height: 18px;
    vertical-align: top;/* <<<< this one */
}

answered Nov 26 '17 at 12:32

evilReiko

16,552
21
76
90

score 0 · Answer 3 · answered Nov 26 '17 at 12:17

0

You could add vertical-align: middle for both inputs and div , and decrease the height of div to make it 17px so they will be perfectly aligned.

input{
    width: 35%;
    border: 1px solid #A7A7A7;
    display: inline-block;
    font-size: 11px;
    padding: 0 5px;
    line-height: 18px;
    vertical-align: middle
}
input:first-child{
    border-right: none;
}
input:nth-child(3){
    border-left: none;
}
#between_inputs{
    width: 10px;
    height: 17px;
    display: inline-block;
    background-color: white;
    border-top: 1px solid #A7A7A7;
    border-bottom: 1px solid #A7A7A7;
    line-height: 18px;
    vertical-align: middle
}

<input type="text" name="min" placeholder="min."/><div id="between_inputs"></div><input type="text" name="max"  placeholder="max."/>

answered Nov 26 '17 at 12:17

Mhd Alaa Alhaj

2,330
1
9
18

it is not "perfectly align" – Elmer Dantas Nov 26 '17 at 12:19
then what did you call this https://prnt.sc/hff07g – Mhd Alaa Alhaj Nov 26 '17 at 12:22
If i don't change the height of the div to 17px, and keep it on 18px, only adding vertical-align: middle, it seems to be perfectly aligned. – MichaelJorgensenDK Nov 26 '17 at 12:23
@user2192013 It's ok if this fits you – Mhd Alaa Alhaj Nov 26 '17 at 12:25
sorry but on my latest version of chrome (62) is like this https://prnt.sc/hff758 that's why I commented – Elmer Dantas Nov 26 '17 at 12:44

How to place a div between 2 inputs, vertical alligned

3 Answers3