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，那么在跨度而不是div上进行内联块。

http://jsfiddle.net/mDHn9/

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

http://jsfiddle.net/6VmBj/

Answer 2

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

Answer 3

是的，请使用display: block;，因为默认情况下span是内联的

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

Answer 4

尝试添加到css

float：left;

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

http://jsfiddle.net/NYwVd/

围绕<div>元素</div>的边框

4 个答案: