html - 图像框水平对齐

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

我相信 display:inline; 功能仅适用于列表项。

让它们显示在一行中的最佳解决方案是将它们包装在一个 div 中，然后给每个盒子 div 一个 float: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;

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

position:relative;

Answer 2

.imageBox {display: inline-block;}

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