0
我在我的網站上顯示3張圖像，我試圖並排顯示。他們的研究和學習方式讓他們垂直，堆疊在一起。這不是我要找的。並排顯示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/是網站，如果有幫助。
在此先感謝！
編輯：我放在這裏的所有代碼是複製粘貼從我的網站。我不知道它有什麼不同。謝謝你的答案。我會努力清理，看看是否有幫助。
上面的代碼工作就像你想我相信：http://jsfiddle.net/KT3em/。由於您將容器元素設置爲'width：100％'，因此您應該檢查容器的父元素以確保它不會強制縮小布局。 – Jasper
oooo boy，我看了一下你的源代碼，你的HTML結構是假的，這是你的整個問題。只需清理你的HTML。您在''標籤之間有'
'標籤，這些標籤將強制新行......您也有嵌套不正確的標籤。這使得瀏覽器渲染HTML的方式與預期不同。 – Jasper
迴應您的編輯。如果您正在使用內容管理系統，那可能是您的問題。 WYSISYG編輯很多時候都會做出假設並更新您的HTML。例如。可能因爲WYSISYG編輯器而添加'
'標籤。 – Jasper