Question

如何使红框水平对齐我给imageBox类显示了内联属性，但它没有工作

在下面提供我的代码

<div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>

http://jsfiddle.net/VXXPC/7/

Answer 1

我相信显示：内联;功能仅适用于列表项。

使它们显示在一行中的最佳解决方案是将它们包装在div中，然后给每个box div一个浮点数：left;

HTML：

<div id="ImageBox_wrapper> 
   <div class="ImageBox></div>
   <div class="ImageBox></div>
   <div class="ImageBox></div>
   <div class="ImageBox></div>
   <div class="ImageBox></div>
   <div class="ImageBox></div>
</div>

CSS：

.ImageBox {
border:1px solid red;
width: 30px;
height: 30px;
float: left;

如果这不起作用，你可以尝试添加一个位置：relative;到你的.ImageBox css

position:relative;

Answer 2

.imageBox {display: inline-block;}

http://jsfiddle.net/VXXPC/13/

图像框水平对齐

2 个答案: