powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS: Заполнить ширину родителя родителя с учетом родителя
13 сообщений из 13, страница 1 из 1
CSS: Заполнить ширину родителя родителя с учетом родителя
    #39926603
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Мне нужно выводить значения с подписями, причем значения должны заполнять всю доступную ширину родителя.
Делаю так:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
.static-block {
	display: table;
	width: 100%;
	padding: 2px 0;
}
.static-block label {
	display: table-cell;
	width: 1%;
}
.static-block input {
	display: table-cell;
	width: 100%;
	border: 2px solid #eee;
	background: #f0f0f0;
	font-weight: bold;
	margin-left: 1ex;
}


Код: html
1.
2.
3.
4.
5.
6.
<div class="col-sm-6">
  <div class="static-block">
    <label>Телефон:</label>
    <input type="text" readonly value="79876543210">
  </div>
</div>



Но мне бы хотелось input размещать внутри label (чтобы не задавать атрибут for и вообще мне так больше нравится):
Код: html
1.
2.
3.
4.
5.
6.
7.
<div class="col-sm-6">
  <div class="static-block">
    <label>Телефон:
      <input type="text" readonly value="79876543210">
    </label>
  </div>
</div>



Можно ли для такой структуры получить такое же поведение (чтобы input заполнял всю доступную ширину, за вычетом содержимого label)?
...
Рейтинг: 0 / 0
CSS: Заполнить ширину родителя родителя с учетом родителя
    #39926617
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
...
Рейтинг: 0 / 0
CSS: Заполнить ширину родителя родителя с учетом родителя
    #39926635
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Да, типа такого.
Но разумеется без calc(100% - 90px).
calc еще куда ни шло, но 90px точно не пойдет.
...
Рейтинг: 0 / 0
CSS: Заполнить ширину родителя родителя с учетом родителя
    #39926640
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.
Но разумеется без calc(100% - 90px).
calc еще куда ни шло, но 90px точно не пойдет.
почему?
...
Рейтинг: 0 / 0
CSS: Заполнить ширину родителя родителя с учетом родителя
    #39926642
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Потому что ширина может быть любой.
...
Рейтинг: 0 / 0
CSS: Заполнить ширину родителя родителя с учетом родителя
    #39926644
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
...
Рейтинг: 0 / 0
CSS: Заполнить ширину родителя родителя с учетом родителя
    #39926645
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.
Потому что ширина может быть любой.
ширина чего?
...
Рейтинг: 0 / 0
CSS: Заполнить ширину родителя родителя с учетом родителя
    #39926663
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вадя
а так

Оба варианта не работают (не заполняют всю ширину static-block).

вадя
ширина чего?

Ширина содержимого label.
...
Рейтинг: 0 / 0
CSS: Заполнить ширину родителя родителя с учетом родителя
    #39926676
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
...
Рейтинг: 0 / 0
CSS: Заполнить ширину родителя родителя с учетом родителя
    #39926768
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
.static-block {
width: 100%;
padding: 2px 0;
}
.static-block label {
display:flex;
}
.static-block input {
flex-grow:1
border: 2px solid #eee;
background: #f0f0f0;
font-weight: bold;
margin-left: 1ex;
}

Как то так попробуй. Должно работать.
...
Рейтинг: 0 / 0
CSS: Заполнить ширину родителя родителя с учетом родителя
    #39926776
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник

?

voraa
Как то так попробуй. Должно работать.

Да, с flex получилось.
Правда нужно еще добавить width:1px.
...
Рейтинг: 0 / 0
CSS: Заполнить ширину родителя родителя с учетом родителя
    #39926817
fkthat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Alibek B.
Да, с flex получилось.

С "display: table" еще можно, наверное, сделать. Сейчас некогда пробовать просто.
...
Рейтинг: 0 / 0
CSS: Заполнить ширину родителя родителя с учетом родителя
    #39926874
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
пропал варианn с flex

https://jsfiddle.net/L52bc46h/3/
...
Рейтинг: 0 / 0
13 сообщений из 13, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS: Заполнить ширину родителя родителя с учетом родителя
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]