在html中对齐文本框和文本/标签？

Question

我无法弄明白。如何对齐文本框？我以为使用float：左边的标签上左边（当我注意到输入现在在左边没有那个时，然后在输入上执行它）但是那是完全错误的。

如何让文本框与文本框旁边的标签对齐而不是最左边？

图片是我希望它的样子。

Answer 1

每个标签/输入对都有两个左右框。两个盒子都在一排并且具有固定的宽度。现在，您只需使用text-align: right;

使标签文本向右浮动

这是一个简单的例子：

http://jsfiddle.net/qP46X/

Answer 2

使用表格将是一个（并且简单）选项。

其他选项都是关于设置固定宽度并使其文本对齐到右边：

label {
   width: 200px;
   display: inline-block;
   text-align: right;
}

或者，正如所指出的那样，使它们全部浮动而不是内联。

Answer 3

你可以做这样的多div布局

<div class="fieldcontainer">
    <div class="label"></div>
    <div class="field"></div>
</div>

，其中     .fieldcontainer {clear：both; }     .label {float：left;宽度：___}     .field {float：left; }

或者，我实际上更喜欢表格这样的表格。这是非常表格的数据，它非常干净。两者都会奏效。

Answer 4

我喜欢在div的css中设置'line-height'以使它们正确排列。以下是使用asp和css进行操作的示例：

ASP：

<div id="profileRow1">
    <div id="profileRow1Col1" class="righty">
        <asp:Label ID="lblCreatedDateLabel" runat="server" Text="Date Created:"></asp:Label><br />
        <asp:Label ID="lblLastLoginDateLabel" runat="server" Text="Last Login Date:"></asp:Label><br />
        <asp:Label ID="lblUserIdLabel" runat="server" Text="User ID:"></asp:Label><br />
        <asp:Label ID="lblUserNameLabel" runat="server" Text="Username:"></asp:Label><br />
        <asp:Label ID="lblFirstNameLabel" runat="server" Text="First Name:"></asp:Label><br />
        <asp:Label ID="lblLastNameLabel" runat="server" Text="Last Name:"></asp:Label><br />
    </div>
    <div id="profileRow1Col2">
        <asp:Label ID="lblCreatedDate" runat="server" Text="00/00/00 00:00:00"></asp:Label><br />
        <asp:Label ID="lblLastLoginDate" runat="server" Text="00/00/00 00:00:00"></asp:Label><br />
        <asp:Label ID="lblUserId" runat="server" Text="UserId"></asp:Label><br />
        <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><br />
        <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox><br />
        <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox><br />
    </div>
</div>

以下是CSS文件中的代码，使上述所有字段看起来都很整洁：

#profileRow1{width:100%;line-height:40px;}
#profileRow1Col1{float:left; width:25%; margin-right:20px;}
#profileRow1Col2{float:left; width:25%;}
.righty{text-align:right;}

除了DIV标签之外，您基本上可以拉出所有内容并替换为您自己的内容。

当我说它看起来像原始帖子中的图像那样对齐时，请相信我！

我会发布截图但Stack不会让我： 哎呀！无法提交您的修改，因为： 很抱歉，作为垃圾邮件防护机制，不允许新用户发布图片。获得超过10个声望来发布图片。

：）

Answer 5

我找到了更好的选择，

twurl -t -A 'Content-type: application/json' /1.1/direct_messages/events/new.json -d '{"event":{"type":"message_create","message_create":{"target":{"recipient_id":"999999999"},"message_data":{"text":"What syourfavoritetypeofbird?","quick_reply":{"type":"options","options":[{"label":"RedBird","description":"Adescriptionabouttheredbird.","metadata":"external_id_1"},{"label":"BlueBird","description":"Adescriptionaboutthebluebird.","metadata":"external_id_2"},{"label":"BlackBird","description":"Adescriptionabouttheblackbird.","metadata":"external_id_3"},{"label":"WhiteBird","description":"Adescriptionaboutthewhitebird.","metadata":"external_id_4"}]}}}}}'

在这里演示：https://jsfiddle.net/durtpwvx/