CODEWITHSUNDEEP
htmlcss
Neilos
Neilos

Reputation: 2746

CSS aligning form inputs and inline-block elements

I would like to align my icon elements with the form inputs. This is what I have so far:

jsfiddle

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

and the css:

.ctr {
    font-size: 0;
}

.ctr input {
    font-size: 14px;
    line-height: 14px;
    height: 14px;
    width: 100px;
    padding: 13px;
    border: 1px solid #000;
}

.icon-ctr {
    display: inline-block;
    height: 16px;
    padding: 12px;
    border: 1px solid #000;
    margin-right: -1px;
}

.icon {
    display: inline-block;
    height: 16px;
    width: 16px;
    background-color: #f00;
}

You'll notice that the elements don't align in a straight line as I had hoped. Firstly what property is causing this? And secondly what is the most appropriate way to align the elements in a straight line?

Upvotes: 1

Views: 1424

Answers (2)

Liftoff
Liftoff

Reputation: 25392

Inline block elements, by default, align to the baseline of the previous element.

All you need to do is vertically align the input to the top of the icon.

.ctr input
{
    vertical-align: top;
}

JSFiddle

Upvotes: 2

Tamil Selvan C
Tamil Selvan C

Reputation: 20199

Use in .icon-ctr add float: left;

.ctr {
  font-size: 0;
}
.ctr input {
  font-size: 14px;
  line-height: 14px;
  height: 14px;
  width: 100px;
  padding: 13px;
  border: 1px solid #000;
}
.icon-ctr {
  display: inline-block;
  float: left;
  height: 16px;
  padding: 12px;
  border: 1px solid #000;
  margin-right: -1px;
}
.icon {
  display: inline-block;
  height: 16px;
  width: 16px;
  background-color: #f00;
}
<div class="ctr">
  <div class="icon-ctr">
    <span class="icon"></span>
  </div>
  <input type="text" />
</div>

Upvotes: 0

Related Questions