Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Как задать ширину элементу на остаток ширины родителя?

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: без JS, только с css
Поиск в теме | Версия для печати
Contr
Отправлено: 23 Июня, 2014 - 08:42:37
Post Id



Частый гость


Покинул форум
Сообщений всего: 202
Дата рег-ции: Окт. 2011  
Откуда: с Марса


Помог: 1 раз(а)
CODE (html):
скопировать код в буфер обмена
  1. <div style="width: 400px;">
  2. Текст текст:<input type="text" name="name" value=""/>
  3. </div>


Как задать ширину <input> на остаток ширины родителя?
Текст перед input может состоять из разного числа символов.
Есть ли реалазация этого момента на уровне стилей?
 
 Top
Ch_chov
Отправлено: 23 Июня, 2014 - 09:21:36
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2121
Дата рег-ции: Июль 2008  
Откуда: из города


Помог: 90 раз(а)
 
 Top
Contr
Отправлено: 23 Июня, 2014 - 10:14:47
Post Id



Частый гость


Покинул форум
Сообщений всего: 202
Дата рег-ции: Окт. 2011  
Откуда: с Марса


Помог: 1 раз(а)
Я тоже было вспомнил про таблицы.
Давайте поработаем с этим простым примером:
CODE (html):
скопировать код в буфер обмена
  1. <div id="parent">
  2.     <div id="inner">
  3.         <label>Name Name Name Name</label>
  4.         <input id="text" type="text" />
  5.     </div>
  6.     <p>some paragraph text</p>
  7. </div>
  8. <style>
  9.     #inner {
  10.         display: table;
  11.         width: 100%;
  12.     }
  13.     #text {
  14.         display: table-cell;
  15.         width: 100%;
  16.     }
  17.     label{
  18.         display: table-cell;
  19.         white-space: nowrap;
  20.         width: 1%;
  21.     }
  22. </style>

100%-я ячейка вылезает за край немного.

(Отредактировано автором: 23 Июня, 2014 - 10:40:26)

 
 Top
DelphinPRO
Отправлено: 23 Июня, 2014 - 10:40:01
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
я обычно как-то так делаю

http://jsfiddle[dot]net/EdEN8/


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
Contr
Отправлено: 23 Июня, 2014 - 11:06:35
Post Id



Частый гость


Покинул форум
Сообщений всего: 202
Дата рег-ции: Окт. 2011  
Откуда: с Марса


Помог: 1 раз(а)
CODE (html):
скопировать код в буфер обмена
  1. <div class="el">
  2.     <label for="d">Надпись подлиннее</label>
  3.     <div class="wr">
  4.         <input type="text" name="" id=""/>
  5.     </div>
  6. </div>
  7.  
  8.  
  9. <style>
  10.     .el label {
  11.         float:left;
  12.         padding-right:10px;
  13.     }
  14.    
  15.     .el input {
  16.         width: 100%;
  17.         box-sizing: border-box;
  18.     }
  19.     .el .wr {
  20.         overflow: hidden;
  21.     }
  22. </style>

завернуть в <div style="overflow: hidden;">...
(Добавление)
Чову спасибо за решение на стаковерфлоу:
CODE (html):
скопировать код в буфер обмена
  1. <label>Name Name Name</label>
  2. <span><input id="text" type="text" /></span>
  3. <p>some paragraph text</p>
  4.  
  5.  
  6. <style>
  7.     label {
  8.         display: table-cell;
  9.         white-space: nowrap;
  10.     }
  11.     span {
  12.         display: table-cell;
  13.         width: 100%;
  14.         padding: 0px 10px;
  15.     }
  16.     #text {
  17.         width: 100%;
  18.     }
  19. </style>

У дельфина тоже неплохое решение, а может даже и лучше:

CODE (html):
скопировать код в буфер обмена
  1. <div class="el">
  2.     <label for="d">Надпись подлиннее</label>
  3.     <div class="wr">
  4.         <input type="text" name="" id=""/>
  5.     </div>
  6. </div>
  7.  
  8.  
  9. <style>
  10.     .el label {
  11.         float:left;
  12.         padding-right:10px;
  13.         display: inline-block;
  14.     }
  15.  
  16.     .el input {
  17.         width: 100%;
  18.         box-sizing: border-box;
  19.     }
  20.     .el .wr {
  21.         overflow: hidden;
  22.         padding-right: 10px;
  23.     }
  24. </style>
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB