Javascript HTML-并排显示图像

我试图把图片并排放在我的电子商务网站上。我的代码如下。我没有任何CSS在上面。我如何才能使网站结帐（它只是为了测试的目的，所以网站不会活着）

我应该使用javscript还是其他什么

HTML-：

  <span class="image">

    <p style="float:left ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">
      <a href="order.html"><img src="images/kitmu.jpg" style="width: 180px; margin-bottom: 5px;  padding-top :50px;" ></a><br><a href="order.html">Buy Manchester united Kit for £30.00</a>
      <a href="order.html"><img src="images/kitliver.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Liverpool Kit for £30.00</a>
      <a href="order.html"><img src="images/kita.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy arsenal Kit for £30.00</a>
    </p>

    <p style="clear: both ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">     
      <a href="order.html"><img src="images/kitmc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Manchester City Kit for £30.00</a>
      <a href="order.html"><img src="images/kitc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Chelsea Kit for £30.00</a>
      <a href="order.html"><img src="images/Afootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Addias football for £15.00</a>
    </p>

    <p style="clear: both ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">
      <a href="order.html"><img src="images/cfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Champions League Football for £20.00</a>
      <a href="order.html"><img src="images/pfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Puma football for £12.00</a>
      <a href="order.html"><img src="images/nfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Nike football for £1.00</a>
    </p>

  </span>

您面临的问题是由于您的容器（即段落标记）的宽度与单个图像的宽度相同（这三个图像中没有一个位置可以容纳在指定的容器宽度内）。您需要删除以下内容：

width: 180px;

从你的段落内联风格

此外，还需要为锚点标记指定float:left，而不是段落添加

style="float:left"

---

对于每个标记。

您可以在表中设置它们

<table>
<tr><a href='#.html' style='float:left'><a href='#.html' style='float:right'></tr>
</table>

试试这段代码

<span class="image">
  <table align="center">
    <tr>
      <th><a href="order.html"><img src="images/kitmu.jpg" style="width: 180px; margin-bottom: 5px; " ></a><br><a href="order.html">Buy Manchester united Kit for £30.00</a> </th>
      <th><a href="order.html"><img src="images/kitliver.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Liverpool Kit for £30.00</a></th>
      <th><a href="order.html"><img src="images/kita.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy arsenal Kit for £30.00</a></th>
    </tr>      

    <tr>          
      <th><a href="order.html"><img src="images/kitmc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Manchester City Kit for £30.00</a></th>
      <th><a href="order.html"><img src="images/kitc.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Chelsea Kit for £30.00</a></th>
      <th><a href="order.html"><img src="images/Afootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Addias football for £15.00</a></th>
    </tr>

    <tr>
      <th><a href="order.html"><img src="images/cfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Champions League Football for £20.00</a></th>
      <th><a href="order.html"><img src="images/pfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Puma football for £12.00</a></th>
      <th><a href="order.html"><img src="images/nfootball.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Nike football for £1.00</a></th>
    </tr>
  </table>
</span>

表格的替代方法是将

img

标记CSS更改为

display:inline

，然后将

text align:center

添加到

p

，因此：

<span class="image">
    <p style="text-align:center ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">
    <a href="order.html"><img src="images/kitmu.jpg" style="display: inline; width: 180px; margin-bottom: 5px;  padding-top :50px;" ></a><br><a href="order.html">Buy Manchester united Kit for £30.00</a>
    <a href="order.html"><img src="images/kitliver.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Liverpool Kit for £30.00</a>
    <a href="order.html"><img src="images/kita.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy arsenal Kit for £30.00</a>
    </p>
    <p style="text-align:center; clear: both ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">     
    <a href="order.html"><img src="images/kitmc.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Manchester City Kit for £30.00</a>
    <a href="order.html"><img src="images/kitc.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Chelsea Kit for £30.00</a>
    <a href="order.html"><img src="images/Afootball.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Addias football for £15.00</a>
    </p>
    <p style="text-align:center; clear: both ; margin-bottom: 5px; margin-right: 3px; width: 180px; ">
    <a href="order.html"><img src="images/cfootball.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Champions League Football for £20.00</a>
    <a href="order.html"><img src="images/pfootball.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Puma football for £12.00</a>
    <a href="order.html"><img src="images/nfootball.jpg" style="display: inline; width: 180px; margin-bottom: 5px;"></a><br><a href="order.html">Buy Nike football for £1.00</a>
    </p>
</span>

set

style=“float:left”

为每一个实际上没有帮助的

设置。js fiddle:Dubrava我确实试过你说的，但没有用。下面是您可能能够理解JSFIDLE的链接_http://jsfiddle.net/jAMYS/I 您的代码图像并排显示，但所有图像都在页面右侧，而不是在中间。添加此