並排放置2個div

Question

如何在李中並排放置2個div？ 我在這里寫了一些東西http://jsfiddle.net/n7xUY/來展示我正在嘗試做的事情。

我的html如下：

<ul class="mostRead">
<li class="mostRead 1">
    <a href="#">
        <div class="ranking-image-container">
            <span class="ranking">1</span>
                 <img src="http://lorempixel.com/100/60/" />
        </div>
        <div class="copy-container">
            <span class="mostReadTitle">
                <h4 class="title">Title 1</h4>
            </span>
        </div>
</a>
</li>

<li class="mostRead 1">
    <a href="#">
        <div class="ranking-image-container">
            <span class="ranking">2</span>
                <img src="http://lorempixel.com/100/60/" />
        </div>
        <div class="copy-container">
            <span class="mostReadTitle">
                <h4 class="title">Title 2</h4>
            </span>
        </div>
</a>
</li>

</ul>

我的CSS如下：

ul.mostRead { list-style: none outside none; padding-left:0;  }
li.mostRead {}
.ranking-image-container { }
span.ranking {}
span.ranking img {}
.copy-container {}
span.mostReadTitle {}

基本上，我需要將div.ranking-image-container和div.copy-container及其內容放在同一行，但我無法弄清楚如何做到這一點！

Answer 1

干得好。

工作演示

CSS代碼：

li.mostRead {float:left;}

希望這可以幫助。

Answer 2

設置display:inline-block; 或display:inline; 它會使一切都在同一條線上

.ranking-image-container,.copy-container {
    display:inline-block;    
}

小提琴演示

Answer 3

li { display: inline-block; }

這將使所有li項彼此相鄰

Answer 4

這些類是空的，因為js小提琴我改變了以下行：

li.mostRead {float:left}

Answer 5

使用CSS

div {display：block; 向左飄浮;}