图像框水平对齐

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

.imageBox {display: inline-block;} 

我的代码

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

Answer 2

我相信显示器：内联;函数仅用于列表项目。

使它们显示在一行中的最佳解决方案是将它们包装在一个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; 

如果不工作，你可以尝试添加一个位置：相对;到你的.ImageBox css

position:relative;