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
Форумы портала PHP.SU :: Версия для печати :: Как задать ширину элементу на остаток ширины родителя?
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Как задать ширину элементу на остаток ширины родителя?

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

1. Contr - 23 Июня, 2014 - 08:42:37 - перейти к сообщению
CODE (html):
скопировать код в буфер обмена
  1. <div style="width: 400px;">
  2. Текст текст:<input type="text" name="name" value=""/>
  3. </div>


Как задать ширину <input> на остаток ширины родителя?
Текст перед input может состоять из разного числа символов.
Есть ли реалазация этого момента на уровне стилей?
2. Ch_chov - 23 Июня, 2014 - 09:21:36 - перейти к сообщению
http://stackoverflow[dot]com/a/5825975
3. Contr - 23 Июня, 2014 - 10:14:47 - перейти к сообщению
Я тоже было вспомнил про таблицы.
Давайте поработаем с этим простым примером:
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%-я ячейка вылезает за край немного.
4. DelphinPRO - 23 Июня, 2014 - 10:40:01 - перейти к сообщению
я обычно как-то так делаю

http://jsfiddle[dot]net/EdEN8/
5. Contr - 23 Июня, 2014 - 11:06:35 - перейти к сообщению
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>

 

Powered by ExBB FM 1.0 RC1