html - 图像框水平对齐

Question

如何让红框水平对齐我将 display inline 属性赋予了 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;