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

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

Как сверстать вот такую структуру: label может быть различной ширины, равной тексту, который находится внутри, а input должен занимать всю оставшуюся ширину блока?
https://yadi.sk/d/c1PgsZZ3fDYAF
  • Вопрос задан
  • 602 просмотра
Комментировать
Подписаться 4 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 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 это именно то, что Вам нужно.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать скрипт на терафлрме для деплоймеета
06 мая 2024, в 01:10
30000 руб./за проект
Правки в Laravel админку с тг ботами
05 мая 2024, в 23:43
8000 руб./за проект
Прикрутить новую верстку
05 мая 2024, в 23:39
3000 руб./за проект
Ещё заказы