创建三个圆角矩形框，左侧包含图标，右侧包含文本答案

【问题标题】：Create three rounded rectangle boxes containing icon on left and text on right创建三个圆角矩形框，左侧包含图标，右侧包含文本
【发布时间】：2013-09-07 14:11:37
【问题描述】：

我正在尝试找出创建三个 284x87 圆角矩形框的最佳方法，其中左侧包含一个图标，右侧包含文本。是否值得尝试纯粹使用 CSS 来实现这一点，还是没有办法摆脱使用图像？这是我到目前为止所拥有的，使用整个图像的背景图像：

<style type="text/css">
.blurect {
    background-image: url(blurect1.gif);
    width: 284px;
    height: 87px;
    color: #FFF;
    }
</style>
<div class="blurect">Test</div>

【问题讨论】：

图标本身很可能是一个图像，无论是使用 CSS 还是在 HTML 中应用（我更喜欢使用实际的 img 元素作为“功能”图标）。您想使用哪种标记？
您可以将背景图片放在左边（background-position: left top; 或background-position: left center;），然后将padding-left 应用到.bluerect 以将文本推到右边。

标签： css

【解决方案1】：

您当然可以使用 CSS。正如cale_b所说，设置一个适当位置的背景图像，然后调整padding-left，使文本不与图标重叠。这是适当的 CSS：

.rect {
  background: url(path/to/image.png) 4px center no-repeat;
  padding: 4px 4px 4px 24px;
  width: 200px;
  height: 20px;
  line-height: 20px;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
}

background 规则中的4px center 将图像设置为距左边缘 4px 并垂直居中。左侧内边距设置为 24px 以将文本从背景图标移开

这是一个演示： http://jsfiddle.net/6p8Rz/

尺寸显然可以根据您的需要进行调整

【讨论】：