如何将另一个文本框与另一个文本框放在同一行？

Question

我设法使我的 zip 文本框与我的交付文本框对齐。这是代码。

<div class="form-group" style="float:left">
                                    <asp:TextBox ID="txtAddress" runat="server" Width="227px" Height="81px"
                                        name="form-first-name" placeholder="Delivery Address..." class="form-first-name form-control" Text-Mode="MultiLine"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" 
                                        ErrorMessage="Delivery Address is required." Display="Dynamic" ControlToValidate="txtAddress" 
                                        ForeColor="Red"></asp:RequiredFieldValidator>
                                    <asp:RegularExpressionValidator ID="RegularExpressionValidator10" runat="server" 
                                        ErrorMessage="Enter a valid Address" Display="Dynamic" ControlToValidate="txtAddress" 
                                        ForeColor="Red" 
                                        ValidationExpression="^[a-zA-Z# .0-9]+$"></asp:RegularExpressionValidator>
                                </div>

但是两个文本框之间没有space？我该怎么做？

Answer 1

您可以将 "float: left" 属性添加到您的两个文本框。它使它在同一行上对齐并使用 css 进行样式设置。

示例代码如下所示。只需为两个 div 添加一个 id 并提供一些唯一的 id。

HTML

ABC<br />
<div id="textbox1"></div>
<div id="textbox2"></div>

CSS

#textbox1, #textbox2 {
    display: block;
    float: left;    
    width: 100px;    
    height: 100px;    
}

#textbox1 {
    background-color: red;
}

#textbox2 {
    background-color: blue;
}

见JSFIDDLE

Answer 2

如果您想使用服务器端文本框，则只需将两个文本框放在一起即可。从文本框中删除 class 并将两个文本框彼此放在一起。如果您有任何疑问，请告诉我。

Answer 3

因此，如果您已经将它们并排放置，则可以在右侧框的 CSS 中添加一些 margin-left（或 padding-left）。您可以将 margin-right（或 padding-right）添加到左侧框 CSS。

Answer 4

只需创建一个 table 3 列 + 一行并将文本框单独放入其中。

这里；

      <table>
            <tr>
                <td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
                <td style="width: 3px">&nbsp;</td>
                <td><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
            </tr>
        </table>

Answer 5

我在上面添加了这段代码

<style>
#txtAddress
{
    margin-right:75px;
}

和我的 2 个文本框，我添加了 float:left

 <div class="form-group" style="float:left">
                                    <asp:TextBox ID="txtAddress" runat="server" Width="227px" Height="81px" 
                                        name="form-first-name" placeholder="Delivery Address..." class="form-first-name form-control" Text-Mode="MultiLine"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" 
                                        ErrorMessage="Delivery Address is required." Display="Dynamic" ControlToValidate="txtAddress" 
                                        ForeColor="Red"></asp:RequiredFieldValidator>
                                    <asp:RegularExpressionValidator ID="RegularExpressionValidator10" runat="server" 
                                        ErrorMessage="Enter a valid Address" Display="Dynamic" ControlToValidate="txtAddress" 
                                        ForeColor="Red" 
                                        ValidationExpression="^[a-zA-Z# .0-9]+$"></asp:RegularExpressionValidator>
                                </div>
                                <div class="form-group">
                                     <asp:TextBox ID="txtZip" runat="server" name="form-zip-code" MaxLength="4" Width="200" placeholder="Zip Code..." class="form-zip-code form-control"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator8" Display="Dynamic" runat="server" 
                                        ErrorMessage="Zip code is required." ControlToValidate="txtZip" ForeColor="Red"></asp:RequiredFieldValidator>
                                    <asp:RegularExpressionValidator ID="RegularExpressionValidator8" runat="server" 
                                        ErrorMessage="Enter a valid zip code" Display="Dynamic" ControlToValidate="txtZip" 
                                        ForeColor="Red" ValidationExpression=^[0-9]*$></asp:RegularExpressionValidator>
                                </div>

如何将另一个文本框与另一个文本框放在同一行？

How can I put another text box in the same row as my other text box?

c#

asp.net

textbox

row

alignment