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

The preferred solution for this is to use CSS to style the table (see Mr Alien's answer).

Simply using XHTML to realize this you can use a table to format your data (although this approach is frowned upon):

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

On a side note, your closing head tag should come before your opening body tag.

于 2013-03-10T09:09:29.100 に答える
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 に答える