Как сделать одинаковыми отступы input в резиновой форме при разных разр. экрана?

@Alexgls · Регистрация: 25.09.2015

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

Имеем следующий код:

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
<html>
<head>
    <style>
        form{
            width: 35%;
            height: 55px;
            background: gray;
            min-width: 350px
        }
        .leftElem{
        width: 65px;
        height: 100%;
        }
        .textField{
        
        }
    </style>
</head>
<body>
    <form>
        <input type="button" value="123" class="leftElem">
        <input type="text" class="textField">
    </form>
</body>
</html>

Форма резиновая. В ее левой части блочный элемент (в данном примере кнопка), фиксированной ширины и занимающий всю высоту формы. Небходимо, чтобы текстовое поле меняло размер сохраняя одинаковые отступы от окружающих границ и элементов при разных разрешениях окна браузера. Обычно в таких случаях используют position: absolute с заданием ledt, right и т.д., после чего элемент растягивается сам. Но на данное текстовое поле данный прием почему-то не действует, даже если задать ему display:block;. Я нашел такое решение - обернуть textField в div, задать textField width: 100% и height: 100%, а div растянуть вышеуказанным способом. Но это нарушает правило, запрещающее изменение структуры HTML-документа для чисто оформительских целей (разделение семантики(HTML) и оформления). Что можно сделать в данном случае?

@astartes · 14.05.2016, 21:16

а так не работает?

CSS
1
2
3
4
.textField{
          width: 65%;
          margin: 0 5%;
        }

@DenisDavydov · 14.05.2016, 23:50

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
<html>
<head>
    <style>
        form{
            width: 35%;
            height: 55px;
            background: gray;
            min-width: 350px
        }
        .leftElem{
            width: 20%;
            height: 100%;
        }
        .textField{
            width: 70%;
            float: right;
            margin-right: 5%;
            margin-top: 17px;
            margin-bottom: 17px;
        }
    </style>
</head>
<body>
    <form>
      <input type="button" value="123" class="leftElem">
      <input type="text" class="textField">
    </form>
</body>
</html>

я близок?

@Alexgls · 15.05.2016, 14:11 **[ТС]**

astartes, у вас слишком большой отступ справа при полном экране. DenisDavydov, у вас аналогично слева. Отступ слева и справа должен быть маленьким, порядка 10px и сохранять это значение как на экране мобильного, так и стандартного монитора

@boilzzz · 16.05.2016, 00:49

Попробуй использовать не % и px а vm, vm очень хорошо работает в резиновых макетах.

@DenisDavydov · 16.05.2016, 01:30

http://output.jsbin.com/zedarodoki
сейчас маленький отступ?

@Alexgls · 16.05.2016, 07:46 **[ТС]**

DenisDavydov, сейчас нормально, спасибо. boilzzz, а их необходимо использовать на всей странице, или можно только эпизодически?

Добавлено через 10 минут
И еще: я проверил (например: "http://caniuse.com/#feat=viewport-units"), и получается, что vm, vh и пр. поддерживаются браузерами относительно недавно. Думаю, можно нарыть полифил, но если у пользователя в целях безопасности отключен JS, это все равно не поможет

Добавлено через 9 минут
Что делать с этим?

@boilzzz · 16.05.2016, 09:26

Сообщение от Alexgls

можно только эпизодически?

Можно, я их использую для того что бы адаптивную верстку делать под разные экраны)
Пока что проблем с использованием не находил, можно сделать подстраховочные стили)

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@Alexgls 0 / 0 / 0 Регистрация: 25.09.2015 Сообщений: 17
	15.05.2016, 14:11 [ТС]
	astartes, у вас слишком большой отступ справа при полном экране. DenisDavydov, у вас аналогично слева. Отступ слева и справа должен быть маленьким, порядка 10px и сохранять это значение как на экране мобильного, так и стандартного монитора 0

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	16.05.2016, 00:49
	Попробуй использовать не % и px а vm, vm очень хорошо работает в резиновых макетах. 0

@DenisDavydov 5 / 7 / 2 Регистрация: 06.04.2015 Сообщений: 62
	16.05.2016, 01:30
	http://output.jsbin.com/zedarodoki сейчас маленький отступ? 1

@Alexgls 0 / 0 / 0 Регистрация: 25.09.2015 Сообщений: 17
	16.05.2016, 07:46 [ТС]
	DenisDavydov, сейчас нормально, спасибо. boilzzz, а их необходимо использовать на всей странице, или можно только эпизодически? Добавлено через 10 минут И еще: я проверил (например: "http://caniuse.com/#feat=viewport-units"), и получается, что vm, vh и пр. поддерживаются браузерами относительно недавно. Думаю, можно нарыть полифил, но если у пользователя в целях безопасности отключен JS, это все равно не поможет Добавлено через 9 минут Что делать с этим? 0