0

我正在尝试对齐图像旁边的表格，该表格当前具有与其对齐的文本。我想让下拉菜单与图像的下边缘对齐，有人可以帮我吗？这是我的代码。

<input type="image" src="image.jpg" name="tee" width="180" height="180" ALIGN="center">xxxxxx

<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr>
<tr>
<td><select name="os0">
    <option value="White">White</option>
    <option value="Black">Black</option>
    <option value="Grey">Grey</option>
</select> </td>
<td><select name="os1">
    <option value="S">S </option>
    <option value="M">M </option>
    <option value="L">L </option>
    <option value="XL">XL </option>
</select> </td>

</tr>

4

2 回答 2

1

也许你应该选择 CSS3，它有很多属性，比如 left、right 或 top。我不完全了解 css，但他们在互联网上有很多教程。

于 2013-02-13T01:18:23.947 回答
1

根据您的描述，这是我能想到的最好的使用 CSS 来设置样式的方法。

<style>
div {height: 180px;
width: 300px;}

#image {
    float:left; 
 }
 table { float:right;
    margin-top: 130px;
  }

  </style>

<div>
<input id="image" type="image" src="image.jpg" name="tee" width="180" height="180"               ALIGN="center">

<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input   type="hidden" name="on1" value="Size">Size</td></tr>
<tr>
<td><select name="os0">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select> </td>
<td><select name="os1">
<option value="S">S </option>
<option value="M">M </option>
<option value="L">L </option>
<option value="XL">XL </option>
</select> </td>

</tr></table></div>

但是您也可以通过使用表格然后将行中第二个单元格的内容垂直对齐到底部来解决此问题。

    <table><tr><td>
<input id="image" type="image" src="image.jpg" name="tee" width="180" height="180" ALIGN="center"></td>

<td valign="bottom"> <!-- This line right here is what does the trick -->

<table>
<tr><td><input type="hidden" name="on0" value="Color">Color</td><td><input type="hidden" name="on1" value="Size">Size</td></tr>
<tr>
<td><select name="os0">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select> </td>
<td><select name="os1">
<option value="S">S </option>
<option value="M">M </option>
<option value="L">L </option>
<option value="XL">XL </option>
</select> </td>

</tr></table>
    </td></tr>
        </table>

希望这可以帮助！

于 2013-02-13T02:28:26.607 回答