2

私は次のHTMLを持っています

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style>
    .box
    {
        border:solid black 1px;
        padding:0px;
        margin:0px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input class="box" style="width:300px;" /><br />
        <input class="box" style="width:150px;" />
        <input class="box" style="width:150px;" /><br />
        <input class="box" style="width:100px;" />
        <input class="box" style="width:100px;" />
        <input class="box" style="width:100px;" />
    </form>
</body>
</html>

アイデアは、テキストボックスが右側でピクセルパーフェクトに仕上げられるべきだということです。

最終的には行 2 と行 3 に間隔を追加して幅を広げて補正しますが、今のところ、この単純なサンプルをレンダリングしてもらいたいと思います。

では、これらのテキストボックスの余白を削除して、適切に配置するにはどうすればよいですか?

4

4 に答える 4

6

それらの間に空白があるため、それらは並んでいません。

要素間のすべての改行とタブを削除すると<input>、必要に応じて表示されます。

于 2009-01-05T16:08:42.513 に答える
2

.boxに追加float: left;すると、あなたが望んでいたことがわかりました。

.box {
    padding:0px;
    margin:0px;
    float: left;
}
于 2009-01-05T16:04:16.437 に答える
0

すべてのテキストボックスを右揃えにすることについて話しているのですか?

もしそうなら、それはマージンの問題ではありません。これは、テキストボックスを含む要素に入れるだけです。おそらく、次に text-align: right; を設定します。div の css スタイル。

于 2009-01-05T16:03:36.657 に答える
0

境界線は幅に含まれないため、境界線が 1 ピクセルで幅が 150 ピクセルのボックスは、実際には幅が 152 ピクセルになります。

于 2011-05-31T09:16:30.537 に答える