Question

我正在尝试格式化字段集中的表，两者都在表单内。这是HTML代码：

<!DOCTYPE html>
<html>
<head>
<style>
fieldset{width:90%;}
table {width:100%;border-collapse:collapse;}
table,td {border:1px solid black;}
td.abc {width:40%;}
</style>
</head>
<body>
<form>
    <fieldset>
        <legend>Text Text</legend>
        <table>
        <tr>
            <td> Text </td>
            <td class="abc"> 
                <input size='25' type="text"/>
                <select>
                    <option>Text text text</option>
                    <option> Text </option>
                </select>
            </td>
            <td>
                Text text
            </td>
        </tr>
        <tr>
            <td> Text </td>
            <td class="abc"> 
                <input size='25' type="text"/>
                <select>
                    <option>Text text text</option>
                    <option> Text </option>
                </select>
            </td>
            <td>
                Text text
            </td>
        </tr>
        </table>
    </fieldset>
</form>

</body>
</html>

我的问题是当我放大浏览器时（通过按ctr和+键），我怎样才能在同一行输入文本和选择停留。提前谢谢！

Answer 1

忘记表，使用DIV。这是解决问题的唯一方法。

Answer 2

我同意Sandeep - 我总是遇到桌面问题，而是使用标签和css进行@HTMLhelpers格式化。我没有放大的问题，对于老年人，视障人士来说这是一个很好的功能。

以下是与您希望对字段集进行操作类似的联系页面摘录：

<fieldset>
    <legend>Contact</legend>

<div class="editor-label">
    *@Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.FirstName)
    @Html.ValidationMessageFor(model => model.FirstName)
</div>

<div class="editor-label">
    *@Html.LabelFor(model => model.LastName)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.LastName)
    @Html.ValidationMessageFor(model => model.LastName)
</div>

<div class="editor-label">
    *@Html.LabelFor(model => model.EmailAddress)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.EmailAddress)
    @Html.ValidationMessageFor(model => model.EmailAddress)
</div>
    <input type="submit" value="Submit" /> &nbsp;
    <input type="reset" value="Reset" />

</fieldset>

在放大浏览器时使表格单元格可缩放

2 个答案: