0

私はウェブサイトを開発していて、適切に配置されたデータ入力フォームを作成しようとしています。テーブル構造を使用して、コントロールが適切に配置されることを期待していましたが、役に立ちませんでした。<asp：TableCell>コントロールのColumnSpan属性を使用して、タイトルフィールドがフォーム全体の幅にまたがるようにしました。

Title <asp：TextBox>のwidthプロパティは "100％"に設定されていますが、[FirstName]ボックスと[LastName]ボックスには特定のサイズのピクセル幅があります。

これは私の現在のコードの結果です：

レイアウトのスクリーンショット

そしてコード自体：

<asp:Table runat="server">
    <asp:TableRow>
        <asp:TableCell>
            First Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell>
            <asp:TextBox ID="FirstNameTextBox" runat="server" Width="150px" />
        </asp:TableCell>
        <asp:TableCell>
            &nbsp;&nbsp;Last Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell>
            <asp:TextBox ID="LastNameTextBox" runat="server" Width="150px" />
        </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow>
        <asp:TableCell>
            Title:
        </asp:TableCell>
        <asp:TableCell ColumnSpan="3">
            <asp:TextBox ID="TitleTextBox" runat="server" Width="100%" />
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

ご覧のとおり、レイアウトは十分に単純です。残念ながら、髪の毛のスペースを取りすぎているようです。Title <asp：TextBox>の余分なスペースを削除して、完全に整列させるためのアドバイスをいただければ幸いです。

4

3 に答える 3

0

家系の名前のテキストボックスを右揃えにします。そうすれば、タイトルのテキストボックスは、名のテキストボックスの左側、および姓のテキストボックスの右側と同じ高さになります。

編集

私はそれがパディングと関係があると確信しています。簡単に検索して、ここで可能な解決策を見つけました。幅が100％のHTML入力テキストボックスがテーブルセルをオーバーフローします。

それで問題が解決するかどうか知りたいです。

于 2012-05-23T19:58:15.360 に答える
0

解決：

<asp:Table runat="server">
    <asp:TableRow>
        <asp:TableCell>
            First Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell Width="150px">
            <asp:TextBox ID="FirstNameTextBox" runat="server" Width="100%" />
        </asp:TableCell>
        <asp:TableCell Width="10px" />
        <asp:TableCell>
            Last Name:&nbsp;&nbsp;
        </asp:TableCell>
        <asp:TableCell Width="150px">
            <asp:TextBox ID="LastNameTextBox" runat="server" Width="100%" />
        </asp:TableCell>
    </asp:TableRow>
    <asp:TableRow>
        <asp:TableCell>
            Title:
        </asp:TableCell>
        <asp:TableCell ColumnSpan="4">
            <asp:TextBox ID="TitleTextBox" runat="server" Width="100%" />
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

幅の定義を<asp：TableCell>に変更し、空白スペース用に10pxの列を追加しました。次に、TextBoxの幅を100％に設定することで、スペースを排除しました。奇妙ですが、単純な解決策。

ソリューションのスクリーンショット

于 2012-05-24T16:58:02.717 に答える
0

このcssを100％幅のテキスト入力で使用する

box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
于 2013-09-06T04:49:01.960 に答える