【问题标题】:Styling uneditable-input checkbox and textbox样式化不可编辑的输入复选框和文本框
【发布时间】:2017-07-24 23:50:32
【问题描述】:

我正在表格中制作登录表单,但我很难按照我想要的方式格式化所有内容(更不用说表格的左边距,只是在油漆上弄乱了)。

我想让它看起来像这样:

但目前看起来是这样的:

整个表格都在一个名为“span54”的 div 中。

复选框“框”当前的宽度为 50px(我想要这样),但这也会影响文本框的宽度。

如何区分该 div 中的文本框?

当前的 CSS 代码:

复选框(检查过的复选框)

文本框(已检查的文本框)

表格代码

<table class="logintable">
            <tr>
                <th colspan="2" rowspan="1">Login</th>
            </tr>

            <tr>
                <td class="creds"><asp:label id="user" runat="server" text="User:" /></td>
                    <td colspan="1" rowspan="1"><input id="UserNameTextBox" type="text" runat="server" /></td>
                    <td colspan="1" rowspan="1"><asp:RequiredFieldValidator ID="vUserName" ControlToValidate="UserNameTextBox" Display="Static" ErrorMessage="Username Inválido" runat="server" /></td>
            </tr>

            <tr>
                <td class="creds"><asp:label id="pass" runat="server" text="Password:" /></td>
                    <td colspan="1" rowspan="1"><input id="PasswordTextBox" type="password" runat="server" /></td>
                    <td colspan="1" rowspan="1"><asp:RequiredFieldValidator ID="vUserPass" ControlToValidate="PasswordTextBox" Display="Static" ErrorMessage="Password Inválida" runat="server" /></td>
            </tr>

            <tr>
                <td colspan="3" rowspan="1"><asp:Button ID="btnlogin" runat="server" Text="Login" Class="btn-login" onclick="LoginButton_Click" /><asp:CheckBox id="RemPassword" cssclass="checkbox" runat="server" autopostback="false" text="Lembrar-me"/></td>
            </tr>

            <tr>
                <td><asp:Label id="MsgLabel" runat="server" /></td>
            </tr>

        </table>

【问题讨论】:

    标签: css checkbox textbox html-table


    【解决方案1】:

    编辑文件 dq.css,在第 336 行附近将 width:50px; 更改为 width:160px;

    【讨论】:

    • 我已经尝试过了,但是如果我弄乱了第 336 行,它会弄乱其他页面上的文本框对齐方式。我试图强制文本框和复选框从以下代码继承,但无济于事 input.span54, textarea.span54, .uneditable-input.span54 { width: 120px;左边距:15px; } 我做错了吗?
    猜你喜欢
    • 1970-01-01
    • 2014-03-04
    • 2014-04-28
    • 2010-11-10
    • 1970-01-01
    • 2023-03-16
    • 2015-03-17
    • 1970-01-01
    • 2018-09-03
    相关资源
    最近更新 更多