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にはないため、問題が発生している可能性があります。

編集 私が考えることができる他の唯一のことは、ラベルコントロールがテキストを-でラップすることです-おそらくリテラルコントロールを試してみてください？フィドルは正常に機能するため、Webフォームコントロールを備えたものである必要があります。

于 2012-11-28T03:55:14.267 に答える
0

フロートは慎重に使用する必要があります。代わりに、位置属性を使用して、それに応じてdivを配置できます。

于 2012-11-28T03:42:30.063 に答える