2

我有以下 HTML：

<p style="line-height: 20px; margin-bottom: 10px;"> </p>
<div class="icon sprite-book-open" style="margin-right: 5px"></div>
Topic: No Topic Title
<p></p>

我的CSS是这样的：

.icon {
    background-color: transparent;
    background-image: url(/Images/fugue/sprite.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    width: 16px;
}
.sprite-book-open{ background-position: 0 -288px;  }

有什么方法可以让我在没有段落的情况下做到这一点，因此图片图标与文本对齐。现在这个图标看起来太高了几个像素。我想我需要一些方法来把它放在这条线上，但我不知道该怎么做

4

4 回答 4

0

我不确定我是否理解您要做什么，但是如果您想在段落前面放置一个图标，最好的方法是使用填充左侧和背景。

<style>
.paragraph-with-icon {
    background:url(http://www.pangoo.it/img/pangoo.gif) no-repeat;
    padding:0 0 0 120px;
    line-height: 53px;
}
</style>


<p class="paragraph-with-icon">
Topic: No Topic Title
</p>

我在示例中使用了 100x53 像素的图标（120 像素是 100 像素 + 20 的间距）。

你可以在这里试试：http: //jsfiddle.net/apFvw/1/

如果您希望它与图像顶部对齐，请更改：

line-height: 53px;

和

height: 53px;

或者

min-height: 53px;

（并且有不支持最小高度的浏览器的解决方案）

您可以在同一段落上使用边距来调整间距，而无需添加 div 和额外的标记。

于 2012-11-28T09:22:27.217 回答
0

bottom图标的垂直对齐方式如何：

vertical-align:bottom;

如果您想摆脱所有不必要的标记，请考虑：

HTML：

<div class="title sprite-book-open" style="margin-right: 5px">
Topic: No Topic Title
</div>

CSS：

.title{
    line-height: 16px;
}
.title:before {
    background-color: transparent;
    content: " ";
    background-image: url(/Images/fugue/sprite.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px;
    width: 16px;
    vertical-align:bottom;
}
.sprite-book-open:before{ 
    background-position: 0 -288px;  
}

这是一个演示：http: //jsfiddle.net/V4EM6/8/

于 2012-11-28T09:05:57.590 回答
0

你可以这样做。

<div class="container">
    <div class="icon sprite-book-open" style="margin-right: 5px"></div>
    <div class="text">Topic: No Topic Title</div>
</div>

css

.text{float:left;margin-top:5px;}
.icon{float:left;margin-top:5px}

您现在可以调整 margin-top 以使它们对齐。您可以使用 margin-left 在图标和文本之间创建空间。

于 2012-11-28T09:06:56.470 回答
0 
<style>
    .icon {
        line-height: 1.6em;
        padding: 0 0 0 40px;
        background: url('http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0120/book_open.png') no-repeat 5px 50%
    }

</style>
<div class="icon sprite-book-open">
    <p>
        Topic: No Topic Title
    </p>
</div>

<style>
    .icon {
    display:inline-block;
    height:32px;
    width:32px;
    background: url('http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0120/book_open.png') no-repeat center center }
    span {

    }
    p, span, .icon {vertical-align:middle}

</style>

<p>
    <div class="icon sprite-book-open"></div>
    <span>Topic: No Topic Title</span>
</p>
于 2012-11-28T09:09:00.493 回答