2014-02-25 57 views
0

有一個小問題,我試過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的問題,但上面的圖片中,這就是它的顯示。

+2

你真的不喜歡你的測試嗎? - –

+1

哈哈哈,經典男人! – TrippedStackers

回答

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; 
}