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

你走了。

<强> WORKING DEMO

CSS代码：

li.mostRead {float:left;}

希望这有帮助。

Answer 2

设置display:inline-block;或display:inline;它会使所有内容都在同一行

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

Fiddle Demo

Answer 3

li { display: inline-block; }

这会将所有li项目放在一起

Answer 4

这些类在js小提琴中是空的我更改了以下内容：

li.mostRead {float:left}

Answer 5

使用CSS

div {display：block; float：left;}

并排放置2个div

5 个答案: