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

@Gerd199 · 17.02.2020, 09:04. **Показов** 1971. **Ответов** 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>

Не понимаю, из-за чего правый край кнопки вылезает за правый край?

@Panda58dev · 17.02.2020, 09:32

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

Не понимаю, из-за чего правый край кнопки вылезает за правый край?

Можете поподробней описать проблему? У меня этот код отображается нормально и я не вижу что откуда "вылезает".

@Gerd199 · 17.02.2020, 12:47 **[ТС]**

При этом необходимо сохранить на кнопке свойство

CSS
1
    overflow: hidden;

@Panda58dev · 17.02.2020, 14:24

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

При этом необходимо сохранить на кнопке свойство

могу сказать на вскидку, что данную проблему можно решить поставив в input name="title_p" в атрибуте style фиксированную ширину, а не 100%
к примеру:

HTML5
1
<input name="title_p" value="" placeholder="Наименование" type="text" autocomplete="off" maxlength="250" style="width: 500px;">

@Gerd199 · 17.02.2020, 21:52 **[ТС]**

C фиксированной работает, нельзя ли сделать не фиксированную а по min-content. Чтобы ширина адаптировалась под текст

@Academik · 17.02.2020, 21:53

Gerd199, покажите весь код, как же вам вслепую подсказать...

@Panda58dev · 17.02.2020, 22:23

Сообщение от 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;">

@Gerd199 · 17.02.2020, 23:43 **[ТС]**

Не помогает, тоже самое.
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>

@Academik · 18.02.2020, 00:34

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>

Новые блоги и статьи Все статьи Все блоги /
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через 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-код на мобильном. Вращайте камеру одним пальцем,. . .

@Gerd199 Заблокирован
	17.02.2020, 21:52 [ТС]
	C фиксированной работает, нельзя ли сделать не фиксированную а по min-content. Чтобы ширина адаптировалась под текст 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	17.02.2020, 21:53
	Gerd199, покажите весь код, как же вам вслепую подсказать... 0

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

Решение