Поле input выходит за границу блока

@Рустам1994 · Регистрация: 22.04.2015

Студворк — интернет-сервис помощи студентам

Поле для ввода текста при изменении размеров браузера выходит за границу блока, какое свойство может его привязать к блоку, чтобы оно уменьшалось(сжималось) вместе с ним?

KOPOJI · 20.02.2017, 21:08

CSS
1
2
3
max-width:100%; 
width: 100%;
min-width: 100%;

?

@Рустам1994 · 20.02.2017, 21:10 **[ТС]**

Не сработало

KOPOJI · 20.02.2017, 21:17

Правда? А у меня сработало https://jsfiddle.net/LLmxb971/
Может, все же приведете свой код, или продолжим гадания?

HTML5
1
2
3
<div>
<input>
</div>

CSS
1
2
3
4
5
6
7
8
div {
  width: 80%;
}
input {
  max-width:100%; 
  width: 100%;
  min-width: 100%;
}

@Рустам1994 · 20.02.2017, 21:33 **[ТС]**

CSS
1
2
3
4
5
6
7
8
9
10
11
input{
       border-radius:3px;
       height:22px;
       max-width:100%; 
       width: 100%;
       min-width: 100%;
       border: 1px solid gray; 
       position: relative;
       min-width: 100px;
       margin: 0 auto;
      }

Добавлено через 42 секунды
Да, input находится внутри таблицы.

KOPOJI · 20.02.2017, 21:36

Сообщение от Рустам1994

CSS
1
2
3
min-width: 100%;
 ...
min-width: 100px;

ну и чего вы ожидаете?

@Рустам1994 · 20.02.2017, 21:42 **[ТС]**

ожидаю, что заработает, а результата нет.

KOPOJI · 20.02.2017, 21:47

А, ну, тогда могу только пожелать удачи. Если вы не хотите хоть немного подумать, то мне это вовсе не надо.

@mrtoxas · 20.02.2017, 21:48

Рустам1994, приведите код, который даст возможность воспроизвести проблему.

@thedude · 20.02.2017, 21:52

Сообщение от Рустам1994

CSS
1
2
min-width: 100%;
min-width: 100px;

А теперь еще раз взглянем и подумаем

@Рустам1994 · 20.02.2017, 22:11 **[ТС]**

min-width: 100px не мешает выполнению, так как я пробовал выполнять просто 3 эти строчки отдельно, предварительно удалив остальное, проблема в таблице. Так как input работает адекватно, вне таблиц, с вашими функциями. Не хотел вам нагрубить, спасибо за ответ.

Добавлено через 8 минут

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
#table_location{
 
    border:1px solid none;
    left:18%;
    position:relative;
    
}
input{
       border-radius:3px;
       height:22px;
       max-width:100%; 
       width: 100%;
       min-width: 100%;
       border: 1px solid gray; 
       position: relative;
       margin: 0 auto;
      }
table{   
       font-family:arial;
       font-size:14px;
       table-layout:auto;
       border-collapse:collapse;
 
 
}
tr{
 
}
td { 
    max-width:100%; 
       width: 100%;
       min-width: 50%;
    width:170px;
    height:10px;
    border: 1px solid none;
    padding-left:10px;
    padding-top:none;
}
button{
    height:35px;
    width: 130px;
    font-size:14px;
    color:#FFFFFF;
    background-color:#0D972B;
    border-radius:8px;
    border: 0;
}
h3{
    font-family:arial;
    padding-top:15px;
    
}

@mrtoxas · 20.02.2017, 22:40

Рустам1994, и разметку

@Kenworth · 20.02.2017, 22:49

повесь на свой input свойство

CSS
1
box-sizing: border-box

@aj17 · 20.02.2017, 23:31

а так?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
</head>
<style>
    *{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 1;
        padding: 0;
        margin: 0;
    }
    
    table{
        table-layout: fixed;
        width: 100%;
        border: 1px solid #ccc;
    }
    
    td{
        padding: 10px;
        border: 1px dotted #ccc;
        width: 25%;
    }
    
    .wrap{
        max-width: 960px;
        margin: 0 auto;
        padding: 0 10px;
    }
    
    input[type="text"]{
        height: 44px;
        padding: 10px;
        line-height: 24px;
        font-size: 16px;
        border: 1px solid #414141;
        outline: none;
        border-radius: 4px;
        text-shadow: none;
        display: block;
        width: 100%;
    }
</style>
<body>
   <div class="wrap">
       <table>
           <tbody>
                <tr>
                    <td><input value="просто текст для примера, рыба одним словом, вместо лорем" type="text"></td>
                    <td><input value="просто текст для примера, рыба одним словом, вместо лорем" type="text"></td>
                    <td><input value="просто текст для примера, рыба одним словом, вместо лорем" type="text"></td>
                    <td><input value="просто текст для примера, рыба одним словом, вместо лорем" type="text"></td>
                </tr>
           </tbody>
 
        </table>
   </div>
    
</body>
</html>

@плАхишь · 20.02.2017, 23:51

Обвёртке нужно установить максимальную ширину max-width: 300px + padding: 10px, а инпуту width: 100%

HTML5
1
2
3
4
5
<div class="wrapper">
  <form action="">
  <input type="text" class="input" placeholder="Текст">
  </form>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
*{
  box-sizing: border-box;
}
 
.wrapper{
 max-width: 300px;
 min-height: 100px;
 margin: 0 auto;
 background-color: #ececec;
 padding: 10px;
 
}
 
.input{
  width: 100%;
  height: 35px;
  padding-left: 15px;
}

Пример в песочнице

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .

@Рустам1994 0 / 0 / 0 Регистрация: 22.04.2015 Сообщений: 7

	Поле input выходит за границу блока 20.02.2017, 21:06. Показов 14385. Ответов 14 Метки css, html (Все метки) Поле для ввода текста при изменении размеров браузера выходит за границу блока, какое свойство может его привязать к блоку, чтобы оно уменьшалось(сжималось) вместе с ним? 0

@Рустам1994 0 / 0 / 0 Регистрация: 22.04.2015 Сообщений: 7
	20.02.2017, 21:10 [ТС]
	Не сработало 0

@Рустам1994 0 / 0 / 0 Регистрация: 22.04.2015 Сообщений: 7
	20.02.2017, 21:42 [ТС]
	ожидаю, что заработает, а результата нет. 0

KOPOJI Почетный модератор 16844 / 6724 / 880 Регистрация: 12.06.2012 Сообщений: 19,967
	20.02.2017, 21:47
	А, ну, тогда могу только пожелать удачи. Если вы не хотите хоть немного подумать, то мне это вовсе не надо. 1

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	20.02.2017, 21:48
	Рустам1994, приведите код, который даст возможность воспроизвести проблему. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	20.02.2017, 22:40
	Рустам1994, и разметку 0