并排显示3个图像链接

Question

我在我的网站上有3张图像，我试图并排展示。他们研究和学习的方式和阅读方式使它们垂直，叠加在一起。这不是我想要的。

我的问题是，我错过了什么样的html或css能够做到这一点？

我的css：

#imagestyle {
width:100%;
text-align:center;
padding:5px;
}
span {
display:inline-block;
margin:5px;
}

我的HTML：

<div id="imagestyle">
<span><a href="http://dutchjohnresort.com/wp-content/uploads/2014/01/Kayak-Whitewater.jpg"><img alt="Kayak Whitewater rafting" src="http://dutchjohnresort.com/wp-content/uploads/2014/01/Kayak-Whitewater-150x150.jpg" width="150" height="150" /></a>
<p>Kayak</p>
</span>
<span><a href="http://dutchjohnresort.com/wp-content/uploads/2014/01/Raft-Whitewater.jpg"><img alt="Rafting Whitewater" src="http://dutchjohnresort.com/wp-content/uploads/2014/01/Raft-Whitewater-150x150.jpg" width="150" height="150" /></a>
<p>Inflatable Raft</p>
</span>
<span><a href="http://dutchjohnresort.com/wp-content/uploads/2014/01/Paddleboard-Whitewater.jpg"><img alt="Paddleboard Whitewater Rafting" src="http://dutchjohnresort.com/wp-content/uploads/2014/01/Paddleboard-Whitewater-150x150.jpg" width="150" height="150" /></a>
<p>Paddleboard</p>
</span>
</div>

我无法弄清楚这一点。任何帮助将不胜感激。

此外，如果有帮助，http://www.dutchjohnresort.com/rafting/就是网站。

提前致谢！

编辑：我在这里放的所有代码都是从我的网站上复制粘贴的。我不知道它有什么不同。谢谢你的答案。我将继续清理，看看是否有帮助。

Answer 1

您在问题上发布的代码与您网站上的代码不符：

如果你使用你发布的代码，它将完美地工作，因为@Jasper出现在jsfiddler演示

Answer 2

您的代码似乎工作正常，在您的网站上，您在一个<span>代码中拥有所有3张图片，这会导致他们被视为一个inline-block。 用以下内容替换您的实际网站上的代码：

<div id="imagestyle">
<span><a href="http://dutchjohnresort.com/wp-content/uploads/2014/01/Kayak-Whitewater.jpg"><img alt="Kayak Whitewater rafting" src="http://dutchjohnresort.com/wp-content/uploads/2014/01/Kayak-Whitewater-150x150.jpg" width="150" height="150" /></a>
<p>Kayak</p>
</span>
<span><a href="http://dutchjohnresort.com/wp-content/uploads/2014/01/Raft-Whitewater.jpg"><img alt="Rafting Whitewater" src="http://dutchjohnresort.com/wp-content/uploads/2014/01/Raft-Whitewater-150x150.jpg" width="150" height="150" /></a>
<p>Inflatable Raft</p>
</span>
<span><a href="http://dutchjohnresort.com/wp-content/uploads/2014/01/Paddleboard-Whitewater.jpg"><img alt="Paddleboard Whitewater Rafting" src="http://dutchjohnresort.com/wp-content/uploads/2014/01/Paddleboard-Whitewater-150x150.jpg" width="150" height="150" /></a>
<p>Paddleboard</p>
</span>
</div>

希望有所帮助！

Answer 3

尝试范围{float: left}。说是否有效