Ввод числа кнопкой внутри

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

Желаемый результат:

Итак, розовая коробка — это div:

<div class = "numberSubmittion SimpleInputBox buttonCorners brandBlue" >
    <input type = "number" class = "font"  name = "productPrice" placeholder = "Enter Your Phone Number">
    <button type = "submit" value = ">">
</div>

css:

.numberSubmittion {
    height: 100%;
}

.numberSubmittion input {
  height: 100%;
  width:75%;
  margin-left: 0px;
  font-size: 14;
  border:0px solid clear;
  outline-width: 0;
  border-width: 0px;
  background-color: rgba(255, 0, 0, 0.1);
}


.numberSubmittion button {
  height: 100%;
  width:25%;
  display: inline-block;
  outline-width: 0;
  border-width: 0px;
  background-color: rgba(255, 0, 255, 0.1);
}

Итак, я правильно ввожу, как мне найти кнопку справа? Прямо сейчас кнопка находится за пределами розового div и находится слева.

РЕДАКТИРОВАТЬ

После исправления моего html для удаления пробелов:

<input type = "number" class = "font"  name = "productPrice" placeholder = "Enter Your Phone Number"><button type = "submit" value = "ab">

но теперь, когда они выровнены, входной div имеет некоторое верхнее поле и не выровнен по вертикали с розовым, в то время как кнопка выровнена хорошо.

Итак, вы хотите, чтобы «>» был внутри розового элемента .numberSubmittion?

— 17.03.2019 09:09

Пожалуйста, исправьте ошибки форматирования и включите остальные CSS.

— 17.03.2019 09:12

@ ЭндрюL64 да. Пожалуйста, смотрите мое редактирование кода.

— 17.03.2019 10:10

html css

17.03.2019 08:40

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

183

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

* {
    box-sizing: border-box;
    font-family: inherit;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.25%;
}

body {
    font-family: sans-serif;
    font-size: 1.6rem;
}

.num-box {
    margin: 5rem auto;
    width: 300px;
    display: flex;
    background-color: pink;
    border-radius: 1rem;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

.num-input {
    width: calc(100% - 40px);
    padding: 2rem;
    border: 0;
    background: transparent;
    font-family: sans-serif;
    font-size: 2rem;
    outline: none;
}

.num-btn {
    width: 40px;
    height: 40px;
    padding: 10px;
    position: relative;
    border: 0;
    outline: none;
    background: transparent;
}

.num-btn::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    content: '✔';
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 50%;
    color: #9e9b9b;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Hello World From Gaurav</title>
     
</head>
<body>
    <div class = "num-box">
        <input type = "number" name = "" id = "" class = "num-input" placeholder = "Type number">
        <button class = "num-btn"></button>
    </div>
</body>
</html>

17.03.2019 10:19

Ответ принят как подходящий

Фиксированный.

у вас не может быть пробелов в html :

   <input type = "number" class = "font"  name = "productPrice" placeholder = "Enter Your Phone Number"><button type = "submit" value = "ab">

Затем при использовании inline-block вы должны выровнять оба элемента поверху vertical-align:top

17.03.2019 10:27

Другие вопросы по теме

Невозможно переключаться между display:contents и display:none в Safari

Удаление пробела в каждом элементе div

Поместить абзац под первым абзацем

Javascript | addOnEventListener не работает?

Почему правила CSS отключены

Можно ли заставить Chrome возвращать необработанное значение свойства CSS «контент»?

Способ подсчета столбцов в адаптивной сетке

Открыть модальное окно в контейнере Bootstrap при загрузке страницы

Фиксированный div в соответствии с прокруткой страницы

Зачем нам нужен дисплейный блок, чтобы центрировать кнопку

Ввод числа кнопкой внутри

Ответы 2

Другие вопросы по теме

Похожие вопросы