Question

大家在我的网页上有一些奇怪的东西，因为它会在每个控制器后自动添加新行

    <asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1" Visible="false"></asp:Label>
    <asp:RequiredFieldValidator runat="server" id="lln" controltovalidate="Textbox" errormessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" />
    <asp:TextBox ID="Textbox"  runat="server" Visible ="false" Width="350px" ></asp:TextBox>
    <asp:LinkButton ID="check" CssClass="myclass" visible="false" runat="server" OnClick="check_Click">Check</asp:LinkButton>

这里是CSS代码：

a.myclass{ color: #FF0000; text-decoration: none; }
a.myclass:hover { text-decoration: none; }

.question_bold {
    font-weight: bold;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    background-color: #e6e6e6;
    height: 25px;
    width: 100%;
    display: block;
}

我尝试更改显示，甚至从asp中移除整个CSS但仍然相同我需要文本框，字段验证器，链接按钮在同一行.... 任何想法？！

Answer 1

下面的代码会将控件排成一行。它使用CSS3 flexbox来排列控件。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
         <style>
             a.myclass{ color: #FF0000; text-decoration: none; }
            a.myclass:hover { text-decoration: none; }

            .question_bold {
                font-weight: bold;
                border: 1px solid #e6e6e6;
                border-radius: 10px;
                background-color: #e6e6e6;
                height: 25px;
                width: 100%;
                display: block;
            }

            .flex-container {
                display: flex;
                width: 650px;
                height: 250px;
            }

            .flex-item {
                height: 100px;
                margin: 10px;
            }
         </style>
    </head>
    <body>
        <form id="form1" runat="server">

        <div class="flex-container">
            <div class="flex-item"><asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1"></asp:Label></div>
            <div class="flex-item"><asp:RequiredFieldValidator runat="server" id="lln" controltovalidate="Textbox" errormessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" /></div>
            <div class="flex-item"><asp:TextBox ID="Textbox"  runat="server"  Width="350px" ></asp:TextBox></div> 
            <div class="flex-item"><asp:LinkButton ID="check" CssClass="myclass"  runat="server" OnClick="check_Click">Check</asp:LinkButton></div> 
        </div>
        </form>
    </body>
    </html>

上述解决方案要求浏览器支持CSS3 flexbox。你能设置每个控件的宽度吗？这也可以使用CSS完成。以下解决方案适用于不同浏览器。

        <div>
            <span><asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1" Width="100px"></asp:Label></span>
            <span><asp:RequiredFieldValidator runat="server" id="lln" controltovalidate="Textbox" errormessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" /></span>
            <span><asp:TextBox ID="Textbox"  runat="server"  Width="350px" ></asp:TextBox></span> 
            <span><asp:LinkButton ID="check" CssClass="myclass"  runat="server">Check</asp:LinkButton></span> 
        </div>

Answer 2

＆＃13;

<html>
    <head>
        <title> </title>

    </head>
    <body>
                        
                                        <table class="format1" width="740px" cellpadding="2" cellspacing="0">
                                    <tr>
                                        <td>
                                            <asp:Label ID="ll" Class="question_bold" runat="server" Text="label 1" Visible="false"></asp:Label>
                                            <asp:RequiredFieldValidator runat="server" ID="lln" ControlToValidate="Textbox" ErrorMessage="* Required" Font-Bold="True" ForeColor="Red" SetFocusOnError="True" Display="Dynamic" />
                                        </td>

                                        <td>
                                            <asp:TextBox ID="Textbox" runat="server" Visible="false" Width="350px"></asp:TextBox>
                                        </td>


                                        <td>
                                            <asp:LinkButton ID="check" CssClass="myclass" Visible="false" runat="server" OnClick="check_Click">Check</asp:LinkButton>

                                        </td>

                                    </tr>

                                </table>
        </body>

        </html>

＆＃13;

删除额外的行ASP.Net

2 个答案: