Question

以下是我目前情况的图片： alt text http://grab.by/FUM 但是我不希望图像在彼此之下，我希望它们在一条线上，一条直的水平线。这是我目前的代码：

<span title="Milestones" class="tl-icon">
<span class="tl-msg">
<span class="tl-msg-inside">
<div class="slice1"></div>
<div class="slice2"></div>
<div class="slice3"></div>
<div class="slice4"></div>
<div class="slice5"></div>
<div class="slice6"></div>
<div class="slice7"></div>
<div class="slice8"></div>
<div class="slice9"></div>
<div class="slice10"></div>
<div class="slice11"></div>
</span>

那么如何让所有图像都成直线呢？

Answer 1

尝试将图像浮动到左侧。例如：

.image {
    float: left;
}

Answer 2

您应该将所有div的类设置为同一个类，例如切片，然后使用：

 .slices {
     display: inline; 
 }

Answer 3

DIV是块级元素，会使每个切片都在它自己的行上。您可以将这些div的display属性更改为inline，也可以改为使用SPAN。

Answer 4

您的问题有解决方案，然后解决方案解决您的问题。

立即修复是使div显示：inline或float：left。 Divs自然是块状的，这意味着每个都将填充其容器的整个宽度，因此它们堆叠在彼此之下。内联使它们像文本一样，缩小到其内容的大小，并且彼此相邻。浮动的工作方式或多或少。

更好的解决方法是完全避免这些div。你能用＆lt; img＆gt;？这通常是理想的。

将一些图像排成一行

4 个答案: