如何在图像旁边移动文本?

时间:2014-02-25 23:45:14

标签: html css

遇到一个小问题,我尝试了line-height但是没有用。也许我在思考什么?

.blog-container ul{ 
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-container .entry {
    display: inline-block;
    width: 170px;

    padding: 0 0 0 0;

}

.posts li {
        margin: 0;
        padding: 0;
        margin-bottom: 6px;
        padding-bottom: 8px;
        border-bottom: 2px solid rgba(0,0,0,0);
        -webkit-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
        -moz-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
        -o-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
        border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
        display:block;
        line-height: 1.2em;     
}

.blog-container img {
    display: inline-block;
    width: 40px;
    height: 40px
}

.blog-container .entry .date {
    display: block;
    line-height: 0.7em;
}

HTML:

<ul class="posts">
    <li>                                     
    <img src="https://cdn2.iconfinder.com/data/icons/interface-part-3/32/square-stack-small-48.png" alt="">
    <div class="entry">
       <a href="blog_post.html">This is a fucking test</a>
       <span class="date">January 1st, 2013</span>
    </div>                                    
    </li>
    <li>
    <img src="https://cdn2.iconfinder.com/data/icons/interface-part-3/32/square-stack-small-48.png" alt="">
    <div class="entry">
       <a href="blog_post.html">This is a fucking test</a>
       <span class="date">January 1st, 2013</span>
    </div>                                       
    </li>                                                               
 </ul>

图像: enter image description here

和想法家伙?谢谢!

http://jsfiddle.net/3EKJR/(它没有在jsfiddle中显示问题,但在上图中,这就是它所显示的内容。

1 个答案:

答案 0 :(得分:1)

好的,这似乎对我有用。我使用了float:left

<强> FIDDLE

.blog-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.blog-container .entry {
    display: block;
    width: 170px;
    padding: 0 0 0 0;
    float:left;
}
.posts li {
    height:35px;
    margin: 0;
    padding: 0;
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
    -webkit-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
    -moz-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
    -o-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
    border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
    display:block;
    line-height: 1.2em;
    clear:both;
}
.blog-container img {
    display: block;
    float:left;
    width: 40px;
    height: 40px;
    margin-right:10px;
}
.blog-container .entry .date {
    display: block;
    line-height: 0.7em;
}