html - 画像ボックスの水平方向の配置

Question

赤いボックスを水平方向に揃える方法imageBoxクラスにdisplayinlineプロパティを指定しましたが、機能しません

以下に私のコードを提供します

<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を信じています。関数はリストアイテム専用です。

それらを1行で表示するための最良の解決策は、それらを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を追加してみてください。.ImageBoxcssに

position:relative;

Answer 2

.imageBox {display: inline-block;}

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