0

我<form>在我的 HTML 文档的标记中创建了 3 个嵌套表中的 1 个。我插入了输入字段以在文本右侧创建文本框。这一切都有效，我唯一的问题是以下单元格：“名字、姓氏、地址、城市、州、邮政编码和县”不是直接在另一个之下，以保持单元格对齐和文本框对齐。如何对齐每个部分？我希望我能很好地解释这一点，如果不是，请要求进一步澄清。对于这个小问题的任何帮助将不胜感激。

到目前为止，这是我的代码，因此您可以看到我做了什么：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<head>
<img src="j0182695_downsized.jpg" alt="Oatmeal Raisin cookies" style="float: left" >

</head>


<body background="back-225.gif">
<h1 style="text-align: center; color: red; font-family: Arial, Helvetica, sans-serif;">Cookies</h1>

<table width="500" border="0">
    <tr>
        <td align="center"><a href="about.htm">About Us</a></td>
        <td align="center"><a href="mailto:cookiemaster@example.com">Contact Us</a></td>
        <td align="center"><a href="orderform.htm">Place an Order</a></td>
        <td align="center"><a href="recipe.htm">Sample Recipe</a></td>
    </tr>
</table>

<form name="Web Order Form" id="Web Order Form">
<table border="0" cellpadding="2" width="65%">
    <tr>
        <td>Personal Information</td>
    </tr>
    <tr>
        <td>First Name:
        <input name="fname" id="fname" size="30" type="text"   />
        </td>
    </tr>
    <tr>
        <td>Last Name:
        <input name="lname" id="lname" size="30" type="text"  />
        </td>
    </tr>
    <tr>
        <td>Address:
        <input name="address" id="address" size="30" type="text"  />
        </td>
    </tr>
    <tr>
        <td>City:
        <input name="city" id="city" size="35" type="text"  />
        </td>
    </tr>
    <tr>
        <td>State:
        <input name="state" id="state" size="3" type="text"  />
        </td>
    </tr>
    <tr>
        <td>Zip Code:
        <input name="zip" id="zip" size="10" type="text"  />
        </td>
    </tr>
    <tr>
        <td>Country:
        <input name="country" id="country" size="10" type="text"  />
        </td>
    </tr>
</table>
</form>
4

5 回答 5

4

只需将输入框放在另一个单元格中，如下所示：

<tr>
    <td>First Name:</td>
    <td><input name="fname" id="fname" size="30" type="text" /></td>
</tr>

如果你把所有的行都这样，那么标签和输入框就会对齐。

于 2010-02-03T18:55:30.853 回答
1

我在 Doctype 上发布了您的问题的答案：http: //doctype.com/create-nested-table-html。你真的应该考虑使用 DIV 和 CSS 而不是表格和内联样式来设计网站。

于 2010-02-03T20:53:19.493 回答
1

下面是一个将内容与表示分离的示例。页面上有两个主要组件：导航菜单（链接列表）和联系表单（由表单元素列表组成）。HTML 独立存在，即使没有任何样式也能合理显示。

首先，使用Yahoo! 的重置样式表重置样式，以确保无论浏览器特定的默认值如何，起点都是相同的。然后，应用特定样式，直到结果显示合理地匹配要求。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link id="screen-reset" rel="stylesheet" type="text/css" media="screen"
href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">
<style type="text/css">
    html { background:#eef; font-size:18px;}
    body { background:#eee; margin:0 auto; width:95%;}
    #main { clear:both; }
    #hmenu { background:#fed; height:2em }
    #hmenu li { 
        background:#fed;
        display:block; 
        float:left; 
        padding:0 4px;
        border-left:solid 4px #dcb;
    }
    #hmenu a { 
        display:block; 
        font-family:sans-serif;
        font-size:1.5em;
        font-weight:bold;
        line-height:1.3333;
        text-decoration:none; 
    }
    form { padding:1em 0; }
    fieldset { 
        background:#fff; 
        border:solid 1px #222;
        padding:0.5em 0;
        margin:0 auto;
        width:90%; 
    }
    legend { 
        background:#eee;
        padding:0.1667em;
    }
    form li { 
        clear:both; 
        display:block;
        padding:1em 0;
    }
    form li label { 
        display:block; 
        float:left; 
        font-family:sans-serif;
        font-weight:bold;
        padding:0 0.25em 0 0;
        text-align:right; 
        width:35%; 
    }
    form li input[type="text"] { 
        display:block; 
        float:left; 
    }
    form input[type="submit"] {
        margin:0 0 0 35%;
    }
</style>

<title>Contact Form</title>

</head>

<body>

<div id="hmenu">
<ul>
<li><a href="about.htm">About Us</a></li>
<li><a href="mailto:cookiemaster@example.com">Contact Us</a></li>
<li><a href="orderform.htm">Place an Order</a></li>
<li><a href="recipe.htm">Sample Recipe</a></li>
</ul>
</div>

<div id="main">
<form name="web-order-form" id="web-order-form">
    <fieldset>
        <legend>Personal Information</legend>
        <ul>

            <li><label for="fname">First Name: </label>
            <input name="fname" id="fname" size="30" type="text"></li>

            <li><label for="lname">Last Name: </label>
            <input name="lname" id="lname" size="30" type="text"></li>

            <li><label for="address">Address: </label>
            <input name="address" id="address" size="30"
            type="text"></li>

            <li><label for="city">City: </label>
            <input name="city" id="city" size="35" type="text"></li>

            <li><label for="state">State: </label>
            <input name="state" id="state" size="3" type="text"></li>

            <li><label for="zip">Zip Code: </label>
            <input name="zip" id="zip" size="10" type="text"></li>

            <li><label for="country">Country: </label>
            <input name="country" id="country" size="10"
            type="text"></li>

            <li><input type="submit" name="submit-order" id="submit-order"
            value="Place Order"></li>
        </ul>
    </fieldset>
</form>
</div>
</body>
</html>
于 2010-02-03T22:02:29.053 回答
0

只需将inputs 放入td自己的 s 中：

<tr>
    <td>First Name:</td>
    <td><input name="fname" id="fname" size="30" type="text"   /></td>
</tr>
<tr>
    <td>Last Name:</td>
    <td><input name="lname" id="lname" size="30" type="text"  /></td>
</tr>
<tr>
    <td>Address:</td>
    <td><input name="address" id="address" size="30" type="text"  /></td>
</tr>

等等。

于 2010-02-03T18:58:13.503 回答
0

一个简单的选择可能是flex在表格单元格中使用样式

<td style="display:flex">
  <label>Flex</label>
  <input type="text">
  <input type="text">
</td>

只要有足够的空间，它将在一行中显示所有元素。

于 2021-09-24T23:40:31.687 回答