css - 元素周围的边框

Question

我想连续显示 3 张图片(我不想使用表格，因为它不是表格数据，只是一行包含三张图片...)我有以下 HTML 可以正常工作:

 <div>
   <span class="step"><img src="" alt="step one" class="image" ></span>
   <span class="step"><img src="" alt="step two" class="image"></span>
   <span class="step"><img src="" alt="step three" class="image"></span>
 </div>

当我为每个图像添加边框时，问题就开始了(我还包含了一些文本来描述每个图像的内容)。我在 HTML 中做了以下操作，

 <div>
   <span class="step">First Step <img src="" alt="step one" class="image" ></span>
   <span class="step">Second Step <img src="" alt="step two" class="image"></span>
   <span class="step">Third Step <img src="" alt="step three" class="image"></span>
 </div>

在 CSS 中，

.step{
  width:200px;
  height:150px;
  border: 1px solid red;
}

我原以为会看到一个带有图像和文本的框，但我却只在文本周围看到了一个奇怪的框。关于如何将边框添加到 span 元素的任何想法？

Answer 1

添加display: inline-block。 inline 元素没有宽度或高度。 block 元素将创建换行符。使用 inline-block 进行折衷。 http://caniuse.com/#feat=inline-block

如果你想支持 IE 6 和 7，那么在 span 而不是 div 上做 inline-block。

http://jsfiddle.net/mDHn9/

或者，正如 GustavoCostaDeOliveira 坚持的那样，使用 float: left。

http://jsfiddle.net/6VmBj/