Задать вопрос
@Uladzislau
css

Как сверстать блоки разных размеров на всю ширину?

Как сверстать вот такую структуру: label может быть различной ширины, равной тексту, который находится внутри, а input должен занимать всю оставшуюся ширину блока?
https://yadi.sk/d/c1PgsZZ3fDYAF
  • Вопрос задан
  • 628 просмотров
Комментировать
Подписаться 4 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Skillbox
    Веб-вёрстка 3.0
    3 месяца
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Пригласить эксперта
Ответы на вопрос 5
madmages
@madmages
Человек прямоходящий 
.row {
   display: block;
    width: 500px;
}
.row label {
    display: block;
    width: 40%;
    float: left;
}
.row input {
    display: block;
    width: 60%;
    float: left;
}
Ответ написан
5 комментариев
5 комментариев
@mokhovcom
а в чем собственно проблема?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Label + Input</title>
<style>
.row {
	width: 600px;
	margin: 2px auto;
}
.row:after {
	content: "";
	display: block;
	clear: both;
}
.row .label {
	background: #f88;
	float: left;
}
.row .input {
	background: #8f8;
}
</style>
</head>
<body>
<div class="row">
	<div class="label" style="width:100px">label 1</div>
	<div class="input">input 1</div>
</div>
<div class="row">
	<div class="label" style="width:150px">label 2</div>
	<div class="input">input 2</div>
</div>
<div class="row">
	<div class="label" style="width:200px">label 3</div>
	<div class="input">input 3</div>
</div>
<div class="row">
	<div class="label">label 4</div>
	<div class="input">input 4</div>
</div>
</body>
</html>
Ответ написан
1 комментарий
1 комментарий
andykov
@andykov
Shit happens
Вот так

<div class="box">
    <label for="" style="width: 100px;">Label</label>
    <input type="text" value="input">
</div>
<div class="box">
    <label for="" style="width: 60px;">Label</label>
    <input type="text" value="input">
</div>

.box {
    width: 500px;
    margin-bottom: 10px;
    display: table;
}
label,
input{
    display: table-cell;
}
input {
    width: 100%;
    margin-left: 10px;
}
label {
    background-color: #ccc;
}
Ответ написан
4 комментария
4 комментария
Lynn
@Lynn
nginx, js, css
Пример десятилетней давности lynn.ru/examples/dl-table.html

Сейчас я бы сделал на flex-box или display: table
Ответ написан
Комментировать
Комментировать
kumaxim
@kumaxim
Web-программист
На чистом CSS не подскажу, но есть такой фреймворк - Twitter Bootstrap. В нем пример Horizontal form это именно то, что Вам нужно.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
React разработчик
ITK academy • Нижний Новгород
от 50 000 до 90 000 ₽
PHP-разработчик
FoodSoul • Калининград
от 180 000 до 250 000 ₽
Middle+/Senior Frontend Engineer
Data Directs • Тель-Авив
от 350 000 ₽
Ещё вакансии