Можно ли остановить текстовые поля шириной 100% за пределы их контейнеров? - PullRequest
Новая
       37

Можно ли остановить текстовые поля шириной 100% за пределы их контейнеров?

176 голосов
/ 10 марта 2009

Допустим, у меня есть текстовое поле, которое я хочу заполнить целую строку. Я бы придал ему такой стиль: 

input.wide {display:block; width: 100%}

Это вызывает проблемы, потому что ширина зависит от содержимого текстового поля. Текстовые поля по умолчанию имеют поля, границы и отступы, что делает текстовое поле шириной 100% больше, чем его контейнер.

Например, здесь справа:

enter image description here

Есть ли способ заставить текстовое поле заполнить ширину своего контейнера, не выходя за его пределы?

Вот пример HTML, чтобы показать, что я имею в виду: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
        #inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
        input.wide {display:block; margin: 0px}
        input.normal {display:block; float: right}
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">
            <input type="text" class="wide" />
            <input type="text" class="normal" />
            <div style="clear:both;"></div>
        </div>
    </div>
</body>
</html>

Если это запустить, вы можете увидеть, посмотрев на «нормальное» текстовое поле, что «широкое» текстовое поле выступает за пределы контейнера. «Нормальное» текстовое поле перемещается к фактическому краю контейнера. Я пытаюсь заставить "широкое" текстовое поле заполнить свой контейнер, не расширяясь за край, как "нормальное" текстовое поле.

Ответы [ 12 ]

272 голосов
/ 10 марта 2009

Есть ли способ заставить текстовое поле заполнить ширину своего контейнера, не выходя за его пределы?

Да: используя свойство CSS3 «box-sizing: border-box», вы можете переопределить, что означает «ширина», включая внешние отступы и рамку.

К сожалению, поскольку это CSS3, поддержка не очень развита, и, поскольку процесс спецификации еще не закончен, он пока что имеет другие временные имена в браузерах. Итак: 

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Альтернативой старой школы является просто поместить количество 'padding-right' на включающий элемент

или , равное примерно тому, сколько дополнительных левого и правого отступа / границы в 'px' вы думаю, что браузеры будут вводить. (Обычно 6px для IE <8.) </p>
86 голосов
/ 10 марта 2009

Что вы можете сделать, это удалить «дополнительные» по умолчанию на input: 

input.wide {display:block; width:100%;padding:0;border-width:0}

Это сохранит input внутри своего контейнера. Теперь, если вы хотите получить границы, оберните input в div, с границами, установленными на div (таким образом, вы можете удалить display:block из input) Что-то вроде: 

<div style="border:1px solid gray;">
 <input type="text" class="wide" />
</div>

Edit: Другой вариант состоит в том, чтобы вместо удаления стиля из input компенсировать его в обернутом div: 

input.wide {width:100%;}

<div style="padding-right:4px;padding-left:1px;margin-right:2px">
  <input type="text" class="wide" />
</div>

Это даст вам несколько разные результаты в разных браузерах, но они не будут перекрывать контейнер. Значения в div зависят от того, насколько велика граница для input и сколько места вы хотите между input и границей.

12 голосов
/ 25 августа 2015

Это решило проблему для меня!

Без необходимости внешнего деления. Просто примените его к данному текстовому полю. 

box-sizing: border-box;

С этим свойством "Свойства ширины и высоты (и свойства min / max) включают содержимое, отступы и рамку, но не поле"

См. Описание имущества в w3schools .

Надеюсь, это кому-нибудь поможет!

10 голосов
/ 12 марта 2009

Просто столкнулся с этой проблемой сам, и единственное решение, которое я смог найти, работавшее во всех моих тестовых браузерах (IE6, IE7, Firefox), было следующее:

  1. Оберните поле ввода в два отдельных DIV
  2. Установите внешний DIV на ширину 100%, это предотвратит переполнение нашего контейнера документом
  3. Поместите отступ во внутреннем DIV точной величины, чтобы компенсировать горизонтальное переполнение входа.
  4. Установить пользовательский отступ на входе так, чтобы он переполнялся на столько же, сколько я допустил во внутреннем DIV

код: 

<div style="width: 100%">
    <div style="padding-right: 6px;">
        <input type="text" style="width: 100%; padding: 2px; margin: 0;
                                  border : solid 1px #999" />
    </div>
</div>

Здесь общее горизонтальное переполнение для входного элемента составляет 6px - 2x (отступ + граница), поэтому мы устанавливаем отступ справа для внутреннего DIV в 6px.

7 голосов
/ 13 июня 2012

поддержка размеров ящиков на самом деле очень хорошая: http://caniuse.com/#search=box-sizing

Таким образом, если вы не нацелены на IE7, вы сможете решить подобные проблемы, используя это свойство. Такой слой, как sass или less, облегчает работу с такими префиксными правилами, кстати.

3 голосов
/ 10 марта 2009

На самом деле, это потому, что CSS определяет 100% относительно всей ширины контейнера, включая его поля, границы и отступы; это означает, что пространство пригодится. к его содержанию относится некоторое количество меньше, чем 100%, если контейнер не имеет полей, границ или отступов.

Это нелогично, и многие считают ошибкой то, что мы застряли на . Фактически это означает, что% измерения не годятся для чего-либо, кроме контейнера верхнего уровня, и даже тогда, только если у него нет полей, границ или отступов.

Обратите внимание, что поля, границы и отступы текстового поля включены в указанный для него размер CSS - это контейнер, который отбрасывает вещи.

Я сносно обошел эту проблему, используя 98%, но это далеко не идеальное решение, поскольку поля ввода имеют тенденцию к дальнейшему сокращению по мере увеличения контейнера.

РЕДАКТИРОВАТЬ: Я сталкивался с подобным вопросом - я никогда не пробовал дать ответ , и я не знаю точно, относится ли он к вашей проблеме, но это кажется, что так и будет.

1 голос
/ 12 сентября 2012

Если вы не можете использовать box-sizing:border-box, вы можете попробовать удалить width:100% и поместить очень большой атрибут size в элемент <input>, однако недостатком является то, что вы должны изменить HTML и не можете сделать это только с помощью CSS: 

<input size="1000"></input>
1 голос
/ 25 марта 2012

Одно из решений, которое может сработать (оно работает для меня), - применить отрицательное поле при вводе (текстовое поле) ... или фиксированную ширину для ie7 или отказаться от поддержки ie7. Это приводит к идеальной ширине в пикселях. Для меня это 7, поэтому я добавил 3 и 4, но это все еще идеальный пиксель.

У меня была такая же проблема, и я ненавидел иметь дополнительные div для границы и т. Д.!

Так вот мое решение, которое, кажется, работает!

Вы должны использовать таблицу стилей только ie7, чтобы избежать взломов. 

input.text{
    background-color: #fbfbfb;
    border : solid #eee 1px;
    width: 100%;
    -box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;

    *line-height:32px;
    *margin-left:-3px;
    *margin-right:-4px;
    display: inline;   
    padding: 0px 0 0 5px;

}
0 голосов
/ 06 февраля 2018

Просто введите стиль смещения для дополнительного заполнения. В следующем примере отступ на входе будет 10 пикселей слева и справа для общего смещения отступа 20 пикселей: 

input[type=text]{
   width: calc(100% - 20px);
}
0 голосов
/ 03 октября 2014

Это работает: 

<div>
    <input type="text" 
        style="margin: 5px; padding: 4px; border: 1px solid; 
        width: 200px; width: calc(100% - 20px);">
</div>

Первая ширина - это запасное правило для старых браузеров.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...