Выравнивать текстовое поле и текст/метки в html?

Я не могу понять это. Как выровнять текстовое поле? Я думал, что использовать float: слева на ярлыках слева (затем делать это на входе, когда я замечаю, что вход был теперь слева без этого), но это было совершенно неправильно.

Как получить текстовое поле, выровненное вместе с ярлыками слева от них рядом с текстовым полем, а не слева?

Изображение - пример того, как мне хотелось бы выглядеть.

Ответы

Ответ 1

У вас есть два поля слева и справа для каждой пары ярлыков/входных данных. Оба блока находятся в одной строке и имеют фиксированную ширину. Теперь вам нужно просто поместить текст метки вправо с помощью text-align: right;

Вот простой пример:

http://jsfiddle.net/qP46X/

Ответ 2

Использование таблицы будет одной (и простой).

Другими параметрами являются установка фиксированной ширины и выравнивание текста по правому краю:

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

или, как было указано, сделайте их плавающими, а не встроенными.

Ответ 3

вы можете сделать многострочный макет, подобный этому

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

где .fieldcontainer {clear: both; } .label {float: left; width: ___} .field {float: left; }

Или, я действительно предпочитаю таблицы для таких форм. Это очень много табличных данных, и он получается очень чистым. Оба будут работать.

Ответ 4

Мне нравится устанавливать "line-height" в css для divs, чтобы заставить их правильно выстраиваться в линию. Вот пример того, как я это делаю, используя 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 репутаций для публикации изображений.

Ответ 5

Я нашел лучший вариант,

<style type="text/css">
    .form {
        margin: 0 auto;
        width: 210px;
    }
    .form label{
        display: inline-block;
        text-align: right;
        float: left;
    }
    .form input{
        display: inline-block;
        text-align: left;
        float: right;
    }
</style>

Демо здесь: https://jsfiddle.net/durtpwvx/