如何使用列表样式对齐？

Question

嘿，我正在尝试将事物彼此相邻并在彼此之下

这是我正在使用的CSS。

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

 }

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

它显示如下

但我希望它像这样显示

Answer 1

使用类而不是ID并查看clear属性http://www.w3schools.com/cssref/pr_class_clear.asp

Answer 2

这样的事情可行：

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>    

Answer 3

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

Answer 4

如果没有看到您的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的高度来解决此问题。

Answer 5

给#wpp-post-title一个等于缩略图的高度可以解决问题，此时浏览器会根据其中的文本自动确定div的高度。

另外，请确保两个div都具有display: inline-block属性