Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
17 / 17 / 4
Регистрация: 06.03.2014
Сообщений: 2,509
1

Кнопка вылезает за правый край

17.02.2020, 09:04. Просмотров 1038. Ответов 8
Метки нет (Все метки)


HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="" method="POST" class="dv nob " style="display: flex;"> 
       <input name="title_p" value="" placeholder="Наименование" type="text" autocomplete="off" maxlength="250" style="width: 100%;">   
    <button type="submit" name="add" value="add" title="Сохранить" style="
    border: none;
    color: #7d7d7d;
    width: min-content;
    position: relative;
    overflow: hidden;
    background: #e8e8e8;
    padding: 10px;
    font-size: 15px;
">СОХРАНИТЬ</button>
</form>
Не понимаю, из-за чего правый край кнопки вылезает за правый край?
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
17.02.2020, 09:04
Ответы с готовыми решениями:

Блок уходит за правый край экрана
Подскажите пожалуйста по скрину. Тот блок что я обвёл красной рамкой. Почему он уходит за края? Вся...

css правый край div1 прижать к правому краю div2
Есть div1, внутри него div2. Как div2 правым краем с помощью css прижать правому краю div2. ...

Кнопка вылезает за рамки
Есть сайт http://youcar.kiev.ua/ Есть скрипт в css .add_comment { display:block; ...

Кнопка вылезает за див
Привет, требуется помощь, 3 дня голову ломаю. Пожалуйста посмотрите веб-инспектором, почему...

8
Developer☭
139 / 83 / 18
Регистрация: 01.02.2019
Сообщений: 408
17.02.2020, 09:32 2
Цитата Сообщение от Gerd199 Посмотреть сообщение
Не понимаю, из-за чего правый край кнопки вылезает за правый край?
Можете поподробней описать проблему? У меня этот код отображается нормально и я не вижу что откуда "вылезает".
0
17 / 17 / 4
Регистрация: 06.03.2014
Сообщений: 2,509
17.02.2020, 12:47  [ТС] 3
При этом необходимо сохранить на кнопке свойство
CSS
1
    overflow: hidden;
0
Миниатюры
Кнопка вылезает за правый край  
Developer☭
139 / 83 / 18
Регистрация: 01.02.2019
Сообщений: 408
17.02.2020, 14:24 4
Цитата Сообщение от Gerd199 Посмотреть сообщение
При этом необходимо сохранить на кнопке свойство
могу сказать на вскидку, что данную проблему можно решить поставив в input name="title_p" в атрибуте style фиксированную ширину, а не 100%
к примеру:
HTML5
1
<input name="title_p" value="" placeholder="Наименование" type="text" autocomplete="off" maxlength="250" style="width: 500px;">
0
17 / 17 / 4
Регистрация: 06.03.2014
Сообщений: 2,509
17.02.2020, 21:52  [ТС] 5
C фиксированной работает, нельзя ли сделать не фиксированную а по min-content. Чтобы ширина адаптировалась под текст
0
1013 / 671 / 289
Регистрация: 04.04.2013
Сообщений: 2,686
17.02.2020, 21:53 6
Gerd199, покажите весь код, как же вам вслепую подсказать...
0
Developer☭
139 / 83 / 18
Регистрация: 01.02.2019
Сообщений: 408
17.02.2020, 22:23 7
Цитата Сообщение от Gerd199 Посмотреть сообщение
Чтобы ширина адаптировалась под текст
тогда можно поставить min-width: 300px; max-width: 900px; (к примеру), то есть когда текст будет занимать ширину больше чем 300px, то input будет расширяться до 900px.
CSS
1
<input name="title_p" value="" placeholder="Наименование" type="text" autocomplete="off" maxlength="250" style="min-width: 300px; max-width: 900px;">
0
17 / 17 / 4
Регистрация: 06.03.2014
Сообщений: 2,509
17.02.2020, 23:43  [ТС] 8
Не помогает, тоже самое.
min-width: 300px;
Хорошо, текст в кнопке не помещается и по итогу получается тоже самое. Что правый край вылезает...

Добавлено через 1 час 10 минут
Цитата Сообщение от Academik Посмотреть сообщение
Gerd199, покажите весь код, как же вам вслепую подсказать...
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html lang="ru"><head></head><body><form action="" method="POST" class="dv nob " style="display: flex;"> 
       <input name="title_p" value="" placeholder="Наименование" type="text" autocomplete="off" maxlength="250" style="width: 100%;">   
    <button type="submit" name="add" value="add" title="Сохранить" style="
    border: none;
    color: #7d7d7d;
    width: min-content;
    position: relative;
    overflow: hidden;
    background: #e8e8e8;
    padding: 10px;
    font-size: 15px;
">СОХРАНИТЬ</button>
</form>
</body>
</html>
0
1013 / 671 / 289
Регистрация: 04.04.2013
Сообщений: 2,686
18.02.2020, 00:34 9
Лучший ответ Сообщение было отмечено Gerd199 как решение

Решение

Gerd199,
CSS
1
2
3
.form{display: flex;}
.form input{font: 14px Tahoma; padding: 5px 10px; flex-grow: 1;}
.form button{font: 15px Tahoma; text-transform: uppercase; cursor: pointer; color: #7d7d7d; border: none; background: #e8e8e8; padding: 10px 15px;}
HTML5
1
2
3
4
<form action="" method="POST" class="form">
    <input name="title_p" value="" placeholder="Наименование" type="text" autocomplete="off" maxlength="250">
    <button type="submit" name="add" value="add">Сохранить</button>
</form>
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
18.02.2020, 00:34

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Почему низ и правый край сцены вылезают за границы видимости?
Почему низ и правый край сцены вылезают за границы видимости? Делаю во флеш билдере

Потемнел правый край экрана ноутбука Acer (сверху и снизу)
Собственно о чем речь. После чистки ноутбука от пыли (причем все происходило бережно, нигде не...

StringGrid: прикрепить правый край последнего столбца к краю таблицы
Двигаю последний столбец влево - справа от него образуется пустота. Как сделать так, чтобы его...

Написать программу которая при нажатии клавиш:правый Shift+ правый Alt блокировала бы клавишу 9 на клавиатуре.
Добрый день Необходимо написать программу которая при нажатии клавиш:правый Shift+ правый Alt...

Завтра край сдавать надо(
Помогите решить, второй день справиться не могу( Правила, 5.18. Запрещено размещать задания в...

Данные вылезают за край шаблона
Добрый день После того как модуль выводит данные,данные вылезают за край шаблона Как это можно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.