带有文本换行问题的填充背景图像项目符号答案

【问题标题】：Padded background image bullet with text wrap issue带有文本换行问题的填充背景图像项目符号
【发布时间】：2013-09-17 04:37:42
【问题描述】：

看看这个小提琴：

fiddle sauce

您可以看到前 2 个 h3 元素的填充子弹一直飞到左侧。我被困在如何使 h3 元素看起来像最后一个 h3 元素而没有剧烈的“div-ing”或更改。有什么想法吗？

#hiw_bjaCopy
{
    float: left;
    width: 700px;
    margin: 20px;
}

#hiw_specTable
{
    float:left;
    margin: 0 20px 20px 0;
}

#hiw_specTable table td
{
    width: 100px;
    text-align: center;
}

#hiw_bjaPoints
{
    color: #666;
}

#hiw_bjaPoints h3
{
    background: url(http://toastedontheinside.com/wp-content/uploads/2013/09/link_arrow_bl.png) left no-repeat;
    padding-left: 15px;
    color: #516aa2;
}

【问题讨论】：

标签： html css padding css-tables

【解决方案1】：

为您的 h3 使用 display:inline-block;

小提琴：http://jsfiddle.net/parslook/we8FR/2/

【讨论】：