Question

我必须在一个居中的右侧放置一个div，现在我的文本框出现问题。它们是一条独立的线条，不再相同了。

这就是它的样子：http://i.imgur.com/1uK97H8.png

这是我的代码：

            <!-- Logo -->
            <div>
                <asp:Image ID="img_logo" runat="server" ImageAlign="Middle" Width="200px" Height="200px"/>
            </div>

            <!-- Search Textboxes -->
            <div style="display: inline-block; margin-top: 1%">
                <asp:TextBox ID="tb_what" runat="server" CssClass="Textbox" style="margin-left: 1%"></asp:TextBox>
                <asp:TextBox ID="tb_where" runat="server" CssClass="Textbox"></asp:TextBox>
            </div>

            <!-- Search Button -->
            <div style="display: inline-block; position: relative; width: 0; height: 0; vertical-align: top;">
                <div style="background: black; display: inline-block; position: absolute;">
                    <asp:ImageButton ID="btn_search" runat="server" style="margin-top: 1%" ImageUrl="http://png-5.findicons.com/files/icons/772/token_light/256/search.png" CssClass="Button" Width="40px" Height="40px"/>
                </div>
            </div>

            <!-- Login & Register -->
            <div>
                <asp:LinkButton ID="lb_login" runat="server" Font-Names="Segoe UI" Font-Underline="false" style="margin-right: 1%">Login</asp:LinkButton>
                <asp:LinkButton ID="lb_registrer" runat="server" Font-Names="Segoe UI" Font-Underline="false">Registrer</asp:LinkButton>
            </div>
        </div>

感谢您的帮助和时间！

祝你好运马库斯

Answer 1

你可以这样做： http://jsfiddle.net/y8wje2jL/

从输入
将属性设置为外部div（display, width, text-align）
将属性设置为每个输入（width, display）

希望它适合你。

ps：如果它导致按钮出现问题，您可以将position relative设置为包含输入的div，然后使用position: absolute使用negative top

来偏移按钮

Answer 2

工作小提琴 http://jsfiddle.net/y8wje2jL/1/

   <div class="test">
      <input type="textBox" ID="tb_what" runat="server" CssClass="Textbox"/>             
      <input type="textBox" ID="tb_where" runat="server" CssClass="Textbox1"/>       
    </div>

CSS

.test{
    width:400px;;
    display:table;
    text-align: center;
}
.textbox,Textbox1{
    width:40%;
    display:inline-block;
    background:red;
}

Answer 3

<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-                
beta.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.3/css/bootstrap.min.css">  
</head>
<body>
<div class="row">
<div class="col">
  <input type="textBox" ID="tb_what" runat="server" CssClass="Textbox"/>
</div>
<div class="col">             
  <input type="textBox" ID="tb_where" runat="server" CssClass="Textbox1"/>
</div>
</div>
</body>

将2个文本框放在同一行上，必须使用内联块

3 个答案: