Выровнять блок в HTML

Рейтинг: 1Ответов: 1Опубликовано: 27.10.2014

Привет всем. Помогите с элементарной вещью (сам понимаю, но сообразить не могу :=) ). Есть форма, ее нужно расположить по центру и выровнять по правому краю. То есть чтобы все поля text располагались ровно, а текст слева от них - нет. Как-то так: )) alt text

css html
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

HTML:

<div class="row">
    <div class="title">Title</div>
    <div class="input"><input type="text"></div>
</div>
<div class="row">
    <div class="title">Title 2</div>
    <div class="input"><input type="text"></div>
</div>
<div class="row">
    <div class="title">Title 3</div>
    <div class="input"><input type="text"></div>
</div>

CSS: 

.row {
    margin-bottom: 20px;
    width: 500px;
}

.row:after {
    clear: both;
    content: '';
    display: block;
}

.title {
    float: left;
    text-align: right;
    width: 100px;
}
.input {
    float: left;
    margin-left: 30px;
    width: 300px;
}

Результат: http://jsfiddle.net/n38ov7b4/

Все проще простого. :)