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

Copy

JSFiddle

Solution 2:

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>

Share