0

http://jsfiddle.net/HnnHf/1/

私が間違っていることを理解しようとしています。プレーンテーブル、入力ボックスでセルを均等に埋めたい。最初の行には 2 つの入力が表示され、2 番目の行には複数のセルにまたがる 1 つの入力があります。

右側が一致しません。なんで？インスペクターを実行すると、追加のピクセルが表示されますか?

私のHTMLの一部：

<div style="width: 1000px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-top: 10px;">
            <table>
                <tr>
                    <td style="width: 80px;"><label>From&nbsp;</label></td>
                    <td style="width: 120px;">
                        <input type="text" class="fill-space" />
                    </td>
                    <td style="width: 80px;"><label>To&nbsp;</label></td>
                    <td style="width: 120px;">
                        <input type="text" class="fill-space" />
                    </td>
                    <td style="width: 80px;"><label>Sort by&nbsp;</label></td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="6">&nbsp;</td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="3">
                        <input type="text" class="search" />
                    </td>
                    <td></td>
                    <td>
                        Refresh button
                    </td>
                </tr>
            </table>
        </div>

スタイル：

    td label {
        width: 100%;
        color: #F1F1F1;
        text-align: right;
        vertical-align: central;
    }

    input.fill-space {
        width: 100%;
    }

    input.search {
        width: 100%;
        background-image: url("/images/Search.png");
        background-position: right center;
        background-repeat: no-repeat;
    }
</style>

私のライブサイトのずれ:

ここに画像の説明を入力

また、背景を設定すると、入力内にこの別の境界線が表示されるのはなぜですか?

4

1 に答える 1

0

作業フィドル: http://jsfiddle.net/ghUEw/

テーブル要素のデフォルトのパディングとマージンは、ブラウザーによって異なります。そのため、テーブル要素で CSS リセットを使用することをお勧めします。

table * {
    margin: 0;
    padding: 0;
}

次に、border-collapseプロパティが来ます。テーブルの境界線を 1 つの境界線に折りたたむか、個別にレンダリングするか (隣接するテーブル セルなど) を決定します。テーブル行ごとに異なる数のセルがあるため、それらを折りたたむには次のように設定する必要があります。

table {
    border-collapse: collapse;
}

次に、同じ外観にしたい場合は、テーブル内の入力の境界を設定する必要があります。

table input {
    border: 1px solid #aaa;
}

境界線を表示したくない場合は、次のように置き換えますborder: none;

次に、CSSで、ラベルを希望どおりに表示するために、適用できますfloat:right;（これも修正されましvertical-align: middle;た）

td label {
    width: 100%;
    color: #F1F1F1;
    text-align: right;
    vertical-align: middle;
    float:right;
}
于 2013-04-10T02:27:03.820 に答える