tasteslikelemons tasteslikelemons - 2 months ago 7
CSS Question

Prevent an input from pushing a containing div below others in the same row

I'm trying to design an element that is usually just a div displaying text, but which becomes an editable text input when clicked. However, when I put a row of these together, any that are displaying the input get pushed below the level of the others for some reason.

I created a minimal example of this on codepen: http://codepen.io/anon/pen/XjZNdZ

In the interest of simplicity I removed the interactivity and just showed an example of the situation I want to avoid: the middle div should not be pushed below the level of the other two divs.

HTML:

<div class="input-cell">
<span></span>
</div>
<div class="input-cell">
<input type="text">
</div>
<div class="input-cell">
<span></span>
</div>


CSS:

.input-cell {
border: 2px solid black;
height: 30px;
display: inline-block;
width: 90px;
}

input {
width: 60px;
}


Note that specifying the height and widths of the containing divs is a requirement; I want them to fit in a regular table-like layout.

Answer

Inline block renders differently with no content, try adding

vertical-align: bottom;

or use float

// display:inline-block;
float:left;

Or you can try to use flexboxes.