我如何對齊使用列表樣式？

嘿，我試圖對齊的東西彼此相鄰，並在對方我如何對齊使用列表樣式？

這是我使用的CSS。

/* title styles */ 
#wpp-post-title { 
float:right; 
width:100px 

} 

/* thumbnail styles */ 
#wpp-thumbnail { 
    float:left; 
    width:80px; 
}

它顯示了這樣

enter image description here

，但我想讓它顯示這樣

enter image description here

來源

2012-04-22 Terrell Anderson

/* title styles */ 
#wpp-post-title { 
width:100px 
display: inline-block; 
.display: inline; 
.zoom:1; 

} 

/* thumbnail styles */ 
#wpp-thumbnail { 
    display: inline-block; 
    .display: inline; 
    .zoom:1; 
    width:80px; 
}

來源

2012-04-22 00:54:46 AlexC

使用類，而不是IDS，看看清楚財產http://www.w3schools.com/cssref/pr_class_clear.asp

來源

2012-04-22 00:54:54

沒有看到你的HTML，我只能猜測，但我最好的猜測將是下面的樣式添加到您的CSS：

/* You will probably need to change "li" to something more specific, lest it 
    break your existing list styles. */ 
li { 
    overflow:hidden; 
}

這將迫使列表項包裹住你的漂浮位。浮動的元素不會更改父容器的高度，因爲<li>中的所有內容都是浮動的，所以<li>元素的高度爲0px，您將看到奇怪的行爲。 overflow: hidden通過強制<li>確認#wpp-thumbnail和#wpp-post-title的高度來修復此問題。

來源

2012-04-22 00:55:03

給與#wpp-post-title等於縮略圖的高度應該可以解決問題，此時瀏覽器會根據其中的文本自動確定div的高度。

此外，要確保的div給出display: inline-block財產

來源

2012-04-22 00:57:25 Michael

像這樣的東西可以工作：

的jsfiddle演示：http://jsfiddle.net/vPvbn/

CSS：

ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 
li { 
    display: block; 
    height: 80px; 
    margin: 10px 0; 
    padding: 20px 0 0 85px; 
}

HTML：

<ul> 
    <li style="background: url(http://i.imgur.com/9M7yb.jpg) no-repeat 0 0; padding-right: 10px;">LEAKED: The Winner of RuPaul's Drag Race Season 4 Is...</li> 
    <li style="background: url(http://i.imgur.com/eJxiy.jpg) no-repeat 0 0; padding-right: 10px;">WATCH: Rihanna's 'Battlefield' Movie Trailer.</li> 
</ul>

來源

2012-04-22 01:04:42 stealthyninja

我如何對齊使用列表樣式？

回答

相關問題