在流体布局中放置带有文本问题的图标

Question

我试图让事情看起来像上面的图像，这是为了流畅的布局，但不管我做什么，那个号码为1-844的电话图标.....不会移动到旁边的谈话给我们这是JS小提琴：http://jsfiddle.net/xtf205mk/

.fluid {
  clear: both;
  margin-left: 0;
  width: 100%;
  float: left;
  display: block;
}
.top_nav_icon {
  vertical-align: middle;
}
.call_icon_header {
  content: url(images/call-us-icon.png);
  float: left;
}
.talk_icon_header {
  content: url(images/talk-to-us-icon.png);
  float: left;
}
.float_right {
  float: right;
}
.top_nav_icon {
  vertical-align: middle;
}
.top_nav_list1 {
  float: left;
}
.top_nav_list1_1 {
  font-size: 1em;
  width: 100%;
  float: right;
}
.top_nav_list1_2 {
  font-size: 1em;
  width: 100%;
  clear: none;
}
.top_nav_list1_2 {
  font-size: 1em;
  width: 100%;
  clear: none;
}

我使用的是DW CC，但视觉辅助工具无法帮助我将事情向右移动。

请有人帮忙解决这个问题，谢谢。

Answer 1

我使用了伪元素来实现您的功能需求：

要注意的是，我希望您从这里获取的要点是我对display:inline-block;

的使用

.phone,
.talk {
  position: relative;
  display: inline-block;
  padding-left: 50px;
  height: 20px;
  width: 150px;
  padding-top: 10px; /*this is to 'vertically align' the text (adjust for your image height)*/
}
.phone:after {
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  left: 0;
  top: 0;
  background-image: url(http://placekitten.com/g/200/300); /*change to phone icon*/
}
.talk:after {
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  left: 0;
  top: 0;
  background-image: url(http://placekitten.com/g/200/300); /*change to chat icon*/
}

<div class="phone">phone here</div>
<div class="talk">chat here</div>

---

作为旁注，我想指出我的个人讨厌用于浮动元素，因为这个真的会使定位元素变得混乱。

这就是为什么我们有display和positioning css规则。