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

Question

我试图让事情看起来像上图，这是为了流畅的布局，但无论我做什么，号码为 1-844 的电话图标.....不会移动到旁边说话给我们。这是 JS fiddle :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>

---

作为旁注，我想指出我个人对 float 元素的痛恨，因为这确实会在定位元素方面搞砸。 p>

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