Блог

Главная - Вопросы по программированию - Как установить кнопку внутри ввода?

Как установить кнопку внутри ввода?

#html #css #flexbox

#HTML #css #flexbox

Вопрос:

Мне нужно поместить кнопку в мой ввод

Я попытался установить относительное положение для формы и абсолютное для кнопки и изменил левое / верхнее. Но в этих полях я должен указывать большие значения для хорошо выполненного результата (я установил левое значение 600 пикселей для кнопки размещения при вводе, поэтому это меня смущает)

Я хочу вот так:

Есть ли способ сделать это для гибкого отображения?

 form {
    padding: 4rem 0;
    position: relative;
}
input[type=text] {
    background: #fff;
    width: 500px;
    padding: 0.7rem;
    border: 1px solid #cbcbce;
    border-radius: 50px;
    color: #3a3d4b;
}

button {
    position: absolute;
    background: #6fc754;
    padding: 0.6rem 1rem;
    border: none;
    color: #fff;
    border-radius: 25px;
    left: 600px;
    top:5px;
}  
  <form>
  <input type="text" placeholder="Enter text">
  <button>Send Invite</button>
</form>

Комментарии:

1. Скорее всего, это хак: div инкапсулировать форму ( input и button ). Ввод имеет невидимую границу, а граница, которую вы видите, является границей переноса div

2. вы хотите сказать, что мне нужно инкапсулировать форму в блоке div?

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

4. Вы могли бы попробовать что-то вроде inputgroup из Bootstrap с кнопкой. Я могу привести вам пример, если хотите.

Ответ №1:

Попробуйте следующий код. Ошибки нет:

 form {
    padding: 4rem 0;
    position: relative;
    display: table;
}
input[type=text] {
	box-sizing: border-box;
    background: #fff;
    width: 500px;
    padding: 0.7rem 115px 0.7rem 0.7rem;
    border: 1px solid #cbcbce;
    border-radius: 50px;
    color: #3a3d4b;
}

button {
    position: absolute;
    background: #6fc754;
    padding: 0.6rem 1rem;
    border: none;
    color: #fff;
    border-radius: 25px;
    right: 4px;
    transform: translateY(2.5px);
}  
  <form>
  <input type="text" placeholder="Enter text">
  <button>Send Invite</button>
</form>

Ответ №2:

Если вы НЕ можете изменить структуру HTML, то у вас фиксированная ширина 500 пикселей, поэтому, конечно, вам придется выполнить некоторые неприятные вычисления, чтобы расположить ее.

Если бы вы использовали проценты, было бы проще

Кроме того , у вас есть отступы ( которые отличаются от ввода на кнопку ) .

Итак, во-первых, left of кнопка должна быть, calc(500px 1.4rem); где 500px — ширина ввода и 1.4rem находится от left/right padding того, 0.7rem из input которого у ,, есть. Теперь кнопка расположена сразу после ввода. Теперь переместите его влево на 100% от его ширины.

Во-вторых, нижняя часть должна быть bottom: 4.2rem из-за form заполнения top/bottom 4rem , а затем 0.2rem потому что заполнение ввода 0.7rem , а заполнение кнопки 0.6rem настолько 0.1 *2 меньше ( по оси Y ) . 

 form {
  padding: 4rem 0;
  position: relative;
}

input[type=text] {
  background: #fff;
  width: 500px;
  padding: 0.7rem;
  border: 1px solid #cbcbce;
  border-radius: 50px;
  color: #3a3d4b;
}

button {
  position: absolute;
  background: #6fc754;
  padding: 0.6rem 1rem;
  border: none;
  color: #fff;
  border-radius: 25px;
  left: calc(500px   1.4rem);
  bottom: 4.2rem;
  transform: translateX(-100%)
}  
 <form>
  <input type="text" placeholder="Enter text">
  <button>Send Invite</button>
</form>

Комментарии:

1. @Nick ты уверен? jsfiddle.net/omqyedp5 нужны некоторые разрывы слов, но позиция все та же

2. ДА. Если текст кнопки переносится, позиционирование также нарушается.

3. @Nick снова. Вы уверены? jsfiddle.net/omqyedp5/2 добавлено white-space: nowrap;

4. Ну, конечно, ввод будет меньше на мобильных экранах. Но это не то, что спросил OP. Мы не можем ответить на вопрос и охватить все возможные сценарии, в которых OP будет использовать код. Особенно когда есть простой пример кода без какого-либо конкретного контекста

Ответ №3:

Чтобы заставить это работать, вам нужно обернуть их в div который имеет position: relative; свойство CSS для этого.

 form {
    padding: 4rem 0;
    position: relative;
}

.relative {
position: relative;
}

input[type=text] {
    background: #fff;
    width: 500px;
    padding: 0.7rem;
    border: 1px solid #cbcbce;
    border-radius: 50px;
    color: #3a3d4b;
}

button {
    position: absolute;
    background: #6fc754;
    padding: 0.7rem 1rem;
    border: none;
    color: #fff;
    border-radius: 25px;
    right: 141px;
    top:1px;
}  
 <form>
  <div class="relative">
    <input type="text" placeholder="Enter text">
    <button>Send Invite</button>
  </div>
</form>

Комментарии:

1. Здесь вам нужно будет использовать МЕДИА-запросы CSS , чтобы все выглядело так, как вы хотите. Или используйте процент вместо px для определения размера и размещения.