2

我想连续显示 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 元素的任何想法？

4

4 回答 4

3

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

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

http://jsfiddle.net/mDHn9/

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

http://jsfiddle.net/6VmBj/

于 2013-10-24T20:00:01.917 回答
1

是的，“span”是内联显示的...将“span”更改为“div”或在 css 规则中添加 display:block

于 2013-10-24T19:50:15.020 回答
0

是的，display: block;因为 span 默认是内联的，所以使用

.step{
  display: block;
  width:200px;
  height:150px;
  border: 1px solid red;
}
于 2013-10-24T19:50:24.193 回答
0

尝试添加到 css

向左飘浮;

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

http://jsfiddle.net/NYwVd/

于 2013-10-24T19:52:23.200 回答