HTML / cssのテキストボックスのマージンを完全に削除するにはどうすればよいですか

StackOverflow https://stackoverflow.com/questions/413573

  •  03-07-2019
  •  | 
  •  

質問

次の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に間隔を追加して幅を拡大しますが、とりあえずこの単純なサンプルをレンダリングしたいと思います。

では、これらのテキストボックスのマージンを削除して、適切に整列させるにはどうすればよいですか

役に立ちましたか？

解決

それらの間に空白があるため、整列していません。

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

他のヒント

.boxにfloat: left;を追加すると、必要なことをしたことがわかりました。

.box {
    padding:0px;
    margin:0px;
    float: left;
}

すべてのテキストボックスを正当化することについて話していますか？

もしそうなら、それはマージンの質問ではありません。それは、単にテキストを含む要素に入れることです。おそらく、それからtext-align：right;を設定します。 divのCSSスタイル。

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top