0

我想以 html 形式订购我的盒子。我的盒子是无序的，我不知道如何订购它们，也不知道在哪里放置盒子和每个文本前面的按钮/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<body>
MAC Adress : <input type="text" name="mac-addr">
<input type="submit" value="change"><br>
IP Adress : <input type="text" name="ip-addr">
<input type="submit" value="change"><br>
Gateway Adress : <input type="text" name="gate-addr">
<input type="submit" value="change"><br>
Subnet Mask : <input type="text" name="sub-msk">
<input type="submit" value="change"><br>
Ntp Server IP :  <input type="text" name="ntp-ip">
<input type="submit" value="change"><br>
</head>
</body>
</html>
4

3 回答 3

2

你应该这样做

<label for="#">MAC Adress : </label>
<input type="text" name="mac-addr"><br />


label {
    display: inline-block;
    margin-top: 50px;
}

演示

演示 2（带按钮）

于 2013-03-10T08:55:34.250 回答
0

您可以使用此代码：

<body>
    <table><tr><td>
        MAC Adress : </td><td><input type="text" name="mac-addr"></td><td>
        <input type="submit" value="change"></td>
        </tr><tr><td>IP Adress : </td><td><input type="text" name="ip-addr"></td><td>
        <input type="submit" value="change"></td></tr>
        <tr><td>Gateway Adress : </td><td><input type="text" name="gate-addr"></td><td>
            <input type="submit" value="change"></td></tr>
            <tr><td>Subnet Mask : </td><td><input type="text" name="sub-msk"></td><td>
                <input type="submit" value="change"></td></tr><tr>
                <td>Ntp Server IP :  </td><td><input type="text" name="ntp-ip"></td><td>
                <input type="submit" value="change"></td></td></table>
    </body>

这是预览：http: //jsfiddle.net/Gn7aU/

更新 ：

这是使用 div 订购商品的最佳方式：

<div class="tbl">
        <div class="tbl-row">
            <div class="tbl-cell">
                MAC Adress :
            </div>
            <div class="tbl-cell">
                <input type="text" name="mac-addr">
            </div>
            <div class="tbl-cell">
                <input type="submit" value="change">
            </div>
        </div>
        <div class="tbl-row">
            <div class="tbl-cell">
                IP Adress :
            </div>
            <div class="tbl-cell">
                <input type="text" name="ip-addr">
            </div>
            <div class="tbl-cell">
                <input type="submit" value="change">
            </div>
        </div>
        <div class="tbl-row">
            <div class="tbl-cell">
                Gateway Adress :
            </div>
            <div class="tbl-cell">
                <input type="text" name="gate-addr">
            </div>
            <div class="tbl-cell">
                <input type="submit" value="change">
            </div>
        </div>
        <div class="tbl-row">
            <div class="tbl-cell">
                Subnet Mask :
            </div>
            <div class="tbl-cell">
                <input type="text" name="sub-msk">
            </div>
            <div class="tbl-cell">
                <input type="submit" value="change">
            </div>
        </div>
        <div class="tbl-row">
            <div class="tbl-cell">
                Ntp Server IP :
            </div>
            <div class="tbl-cell">
                <input type="text" name="ntp-ip">
            </div>
            <div class="tbl-cell">
                <input type="submit" value="change">
            </div>
        </div>
    </div>

你应该为此添加css样式：

.tbl
{
    display:table;
}
.tbl-row
{
    display:table-row;
}
.tbl-cell
{
    display:table-cell;
}

这是预览：http: //jsfiddle.net/aksVm/

于 2013-03-10T09:01:44.130 回答
0

首选的解决方案是使用 CSS 来设置表格的样式（请参阅 Alien 先生的回答）。

只需使用 XHTML 来实现这一点，您就可以使用表格来格式化您的数据（尽管这种方法不受欢迎）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<table>
  <tr>
    <td>MAC Adress :</td>
    <td><input type="text" name="mac-addr"></td>
    <td><input type="submit" value="change"></td>
  </tr>
  <tr>
    <td>IP Adress :</td>
    <td><input type="text" name="ip-addr"></td>
    <td><input type="submit" value="change"></td>
  </tr>
  <tr>
    <td>Gateway Adress :</td>
    <td><input type="text" name="gate-addr"></td>
    <td><input type="submit" value="change"></td>
  </tr>
  <tr>
    <td>Subnet Mask :</td>
    <td><input type="text" name="sub-msk"></td>
    <td><input type="submit" value="change"></td>
  </tr>
  <tr>
    <td>Ntp Server IP :</td>
    <td><input type="text" name="ntp-ip"></td>
    <td><input type="submit" value="change"></td>
  </tr>
</table>
</body>
</html>

在旁注中，您的结束头部标签应该在您的开始身体标签之前。

于 2013-03-10T09:09:29.100 回答