Question

这是我的代码：

<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>

对于小型设备手机/等，我想在480px宽以下观看时使桌子及其所有功能更小。在使用媒体查询时，我不知道该引用什么：

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

#table {
width: 100px;


}

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

谢谢！

Answer 1

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

首先，不需要外部div，所以我们可以摆脱它。
其次，您需要在媒体查询中更改表格的宽度。我使用了一个百分比值（用于响应）但你可以根据需要将其设置为一个像素值（当然是480px以下）
第三，您需要在媒体查询中为输入/文本区域设置宽度。如果没有这个，它们将占用'size'属性中指定的宽度，并将显示水平滚动条。

这是我使用的媒体查询：

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

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

Answer 2

它不起作用，因为你的表有一个样式，并且该样式表示该表的宽度为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">

它不能很好地工作，因为你仍然需要内容以100px显示...所以我建议你将大小改为大约250px。如果你真的希望它有100px我推荐你以不同的方式制作桌子。

如何使用媒体查询调整表单/表的大小

2 个答案: