0

基于这个答案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;}

我的不工作有什么原因吗？

4

2 回答 2

1

它应该可以正常工作，尽管你有太多不必要的 div，而且你还有一个换行符，可能会把事情搞砸。看看这个小提琴

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 控件的东西。

于 2012-11-28T03:55:14.267 回答
0

Float 应该非常小心地使用。相反，您可以使用位置属性来相应地定位您的 div。

于 2012-11-28T03:42:30.063 回答