Question

基于这个答案StackOverflow @Nikita Rybak我在他的解决方案之后创建了一组标签和文本框，显示正在使用JSFiddle。

我复制了这个并在我的ASP项目中添加了一些类别，但是当加载到chrome时，框和文本都不对齐。

这是我的html文件

<div id="User">
<div>
<div class="left">
    <asp:Label ID="lbl_UserName" runat="server" Text="User Name"></asp:Label>
</div>
<div class="right">
    <asp:TextBox ID="txtbx_UserName" runat="server"></asp:TextBox>
    <br />
</div>
</div>

<div>
<div class="left">
    <asp:Label ID="lbl_FirstName" runat="server" Text="First Name"></asp:Label>
</div>
<div class="right">
    <asp:TextBox ID="txtbx_FirstName" runat="server"></asp:TextBox>
</div>
</div>

<div>
<div class="left">
    <asp:Label ID="lbl_Password" runat="server" Text="Password"></asp:Label>
</div>
<div class="right">
    <asp:TextBox ID="txtbx_Password" runat="server"></asp:TextBox>
</div>
</div>

<div>
<div class="left">
    <asp:Label ID="lbl_ConfPassword" runat="server" Text="Confirm Password"></asp:Label>
</div>
<div class="right">
    <asp:TextBox ID="txtbx_ConfPassword" runat="server"></asp:TextBox>
</div>
</div>
</div>

和我的CSS文件

#Content
{
    position: relative;
    float:none;
    border: 1px solid #000000;
    float: left;
    padding: 80px 40px 60px 40px;
    text-align:center;
    background-color: #F8F8F8;
    left: 0px; right: 0px;
    text-align: center;   
}

#User .left {
    width: 30%;
    float: left;
    text-align: right;}

#User .right {
    width: 65%;
    margin-left: 10px;
    float:left;}

为什么我的工作无效？

Answer 1

它应该可以正常工作，虽然你不必要地在那里有太多的div，你也有一个可能搞砸了的换行符。查看this fiddle

<强> HTML

<div id="User">
    <div class="left">
        <label>User name</label>
    </div>
    <div class="right">
        <input type="text" />
    </div>
    <div class="left">
        <label>First name</label>
    </div>
    <div class="right">
        <input type="text" />
    </div>
    <div class="left">
        <label>Password</label>
    </div>
    <div class="right">
        <input type="text" />
    </div>
    <div class="left">
        <label>Confirm password</label>
    </div>
    <div class="right">
        <input type="text" />
    </div>
</div>

<强> CSS

#User .left {
    width: 30%;
    float: left;
    text-align: right;}

#User .right {
    width: 65%;
    margin-left: 10px;
    float:left;}

此外，你的CSS坚果中定义了一个#Content元素，它不在HTML中，因此可能导致问题。

修改我能想到的另一件事就是标签控件将文本包装成一个 - 也许尝试一个文字控件？小提琴工作得很好，所以它必须是webforms控件。

Answer 2

Float s应该非常小心地使用。相反，你可以使用position属性相应地定位你的div。

框和标签不对齐CSS

2 个答案: