Question

我们如何增加内容页面和主文件页面之间的距离？

两个页面的对象之间的距离导致我的复选框标签流到该复选框下方。

https://issuetracker.google.com/issues/111819103

我试图在“设计”选项卡中进行调整，但是它导致母版页文件中的四个标签折叠成笔直的垂直对齐方式。

由于它们位于单独的aspx页面中，所以我认为CSS无法正常工作。

母版页文件的代码：

<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>

<style type="text/css">
    .auto-style1 {
        width: 520px;
        height: 353px;
        margin-right: 0px;
    }
    .auto-style2 {
        width: 100px;
    }
</style> 
</head>
<body>
        <form id="form1" runat="server" style="text-align: center">
                    <table class="auto-style1">
                        <tr>
                            <td rowspan="4" class="auto-style2"><asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                                </asp:ContentPlaceHolder></td>
                            <td><asp:TextBox ID="txtAuthority" TextMode="MultiLine" runat="server" Height="68px" Width="190px">Authority</asp:TextBox></td>
                        </tr>
                        <tr>
                            <td>
                                <asp:TextBox ID="txtInstitution1" Style="float: left" TextMode="MultiLine" runat="server" Height="68px" Width="190px">Institution 1</asp:TextBox>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <asp:TextBox ID="txtInstitution2" Style="float: right" TextMode="MultiLine" runat="server" Height="68px" Width="190px">Institution 2</asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                               <asp:TextBox ID="txtInstitution3" TextMode="MultiLine" runat="server" Height="68px" Width="190px">Institution 3</asp:TextBox>

                            </td>
                        </tr>
                    </table>
        </form>
     </body>
     </html>

内容页面中的代码

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<table class="auto-style3 bg-dark">
     <tr>

        <td style="padding:10px" class="auto-style2 text-white">
            <img style="float:right" src="https://via.placeholder.com/30"/>
            <asp:Label ID="lblAuthority" runat="server" Text="Authority"></asp:Label>
        </td>
    </tr>
    <tr>
        <td style="padding:10px" class="auto-style2 text-white">
            <em>
            <asp:Label ID="lblAddAgent" runat="server" Text="Initialize"></asp:Label>
            </em>
        </td>
    </tr>
    <tr>

        <td style="padding:10px">

        <asp:Label ID="lblLogin" CssClass="control-label text-white" runat="server" Text="Login: "></asp:Label>
            <br />
        <div class="form-check col-lg-3 col-md-3 col-sm-6 col-xs-12 text-white">
            <asp:CheckBox ID="cbOCBC" runat="server" Text="OCBC" Checked="false" />
        </div>
        <div class="form-check col-lg-3 col-md-3 col-sm-6 col-xs-12 text-white">
            <asp:CheckBox ID="cbDBS" runat="server" Text="DBS" Checked="false" />
        </div>
        <div class="form-check col-lg-3 col-md-3 col-sm-6 col-xs-12 text-white">
            <asp:CheckBox ID="cbStanChart" runat="server" Text="StanChart" Checked="false" />
        </div>
    </tr>
    <tr>
        <td class="auto-style4" style="padding:10px">
            <asp:Button ID="btnEnter"  CssClass="btn btn-light btn-md btn-block" runat="server" Text="Enter" OnClick="btnEnter_Click" />
        </td>
    </tr>
    <tr>
        <td class="auto-style2" style="padding:10px">
            <asp:Button ID="btnDatabase"  CssClass="btn btn-light btn-md btn-block" runat="server" Text="Database" OnClick="btnDatabase_Click" />
        </td>
    </tr>
    <tr>
        <td class="auto-style2" style="padding:10px">
            &nbsp;</td>
    </tr>
    <tr>
        <td class="auto-style2" style="padding:10px">

            <asp:Button ID="btnBack"  CssClass="btn btn-light btn-md btn-block" runat="server" OnClick="btnBack_Click" Text="Back" />

        </td>
    </tr>
</table>
</asp:Content>

Answer 1

尝试一下。将以下CSS类添加到复选框

<input class="form-control Chk-left" type="checkbox" id="field3">

CSS类

.Chk-left {
    width: auto;
    box-shadow: none;
  }

在母版页中，您更改文本align：left

<form id="form1" runat="server" style="text-align: left">

调整占位符和主文件页面内容之间的距离

1 个答案: