4

这是我的代码：

<form name="htmlform" method="post" action="html_form_send.php">
<div id="table">
<table width="400px" style="margin-top: 50px; margin-left: 20px; color: #FFF">
</tr>
<tr>
<td valign="top">
<label for="name">Name *</label>
</td>
<td valign="top">
<input  type="text" name="name" maxlength="50" size="30" style="margin-bottom: 10px">
</td>
</tr>


<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input  type="text" name="email" maxlength="80" size="30" style="margin-bottom: 10px">
</td>

</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input  type="text" name="telephone" maxlength="30" size="30" style="margin-bottom:    10px">
</td>
</tr>
<tr>
<td valign="top">
<label for="enquiry">Enquiry *</label>
</td>
<td valign="top">
<textarea  name="enquiry" maxlength="1000" cols="32" rows="6"></textarea>
</td>

</tr>
<tr>
<td colspan="2" style="text-align:center">

<input type="submit" value="Submit">  
</td>
</tr>
</table>
</div>
</form>

对于小型设备电话/等，当查看宽度低于 480 像素时，我想让表格及其所有功能更小。我不知道使用媒体查询时要参考什么：

@media only screen and (max-width: 480px) {

#table {
width: 100px;


}

上面的这个 css 不起作用，它调整了 div 的大小，但内容仍然是原始大小，即使我将表单放在 div 中它仍然不起作用，也许 div 无论如何都不需要......任何帮助都会收到主要的荣誉！

谢谢！

4

2 回答 2

5

你需要做一些事情来完成这项工作。

  • 首先，外部 div 不是必需的，因此我们可以摆脱它。
  • 其次，您需要在媒体查询中更改表格的宽度。我使用了一个百分比值（用于响应），但如果您愿意，您可以将其设置为像素值（当然低于 480 像素）
  • 第三，您需要在媒体查询中为输入/文本区域设置宽度。没有这个，它们将占用“size”属性中指定的宽度，并导致水平滚动条出现。

这是我使用的媒体查询：

@media only screen and (max-width: 480px) {
    table {
        width:95%;
    }
    input[type=text], textarea {
        width:75%;
    }
}

演示：http: //jsfiddle.net/hABGX/2/

于 2013-08-13T16:56:19.963 回答
3

它不起作用，因为您的表格具有样式，并且该样式表示表格的宽度为 400px。试着把这个：

<table style="margin-top: 50px; margin-left: 20px; color: #FFF; width:100%">

而不是这个：

<table width="400px" style="margin-top: 50px; margin-left: 20px; color: #FFF">

它不会很好地工作，因为您仍然有足够的内容以 100 像素显示...所以我建议您将大小更改为大约 250 像素。如果你真的希望它有 100 像素，我建议你以不同的方式制作表格。

于 2013-08-13T16:19:23.990 回答