Высота ячейки таблицы IE11

У меня макет в виде таблицы, но я не могу добиться одинаковой высоты всех «ячеек».

Вот то, что у меня есть, кто-нибудь видит, что мне не хватает? Или я должен просто использовать оболочку отображения блока с дочерними встроенными оболочками?

.input-group {
    position: relative;
    display: table;
    height: 18px;
}

.table-row{
  display: table-row;
  height: 18px;
}

input.form-control {
    border: 1px solid #ccc;
    padding: 6px 0 6px 12px;
    border-right-width: 0;
    width: 50px;
    height: 18px;
    background-color: #fff;
    display: table-cell;
}


.input-group .input-group-addon {
    padding: 6px 12px 6px 0;
    height: 18px;
    border: 1px solid #ccc;
    border-left-width: 0;
    background-color: #fff;
    display: table-cell;
}

.input-group .fdsa {
    background-color: #ec7404;
    color: #fff;
    padding: 7px 12px;
    cursor: pointer;
    display: table-cell;
}

.fa-euro:before, .fa-eur:before {
    content: "€";
}

<div class = "input-group">
    <div class = "table-row">
        <input class = "form-control" type = "number" id = "AmountInput" value = "50">
        <span class = "input-group-addon">
            <i class = "fa fa-eur"></i>
        </span>

        <span class = "fdsa" id = "BtnFormSubmit">
            Submit
        </span>
    </div>
</div>

html css

02.11.2018 15:17

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

324

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

Ответы 1

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

Попробуйте display: flex

.input-group {
    position: relative;
    display: block;
    height: 18px;
}

.table-row{
  display: flex;
  height: 18px;
}

input.form-control {
    border: 1px solid #ccc;
    padding: 6px 0 6px 12px;
    border-right-width: 0;
    width: 50px;
    height: 18px;
    background-color: #fff;
    display: block;
}


.input-group .input-group-addon {
    padding: 6px 12px 6px 0;
    height: 18px;
    border: 1px solid #ccc;
    border-left-width: 0;
    background-color: #fff;
    display: block;
}

.input-group .fdsa {
    background-color: #ec7404;
    color: #fff;
    padding: 7px 12px;
    cursor: pointer;
    height: 100%;
    display: block;

}

.fa-euro:before, .fa-eur:before {
    content: "€";
}

<div class = "input-group">
    <div class = "table-row">
        <input class = "form-control" type = "number" id = "AmountInput" value = "50">
        <span class = "input-group-addon">
            <i class = "fa fa-eur"></i>
        </span>

        <span class = "fdsa" id = "BtnFormSubmit">
            Submit
        </span>
    </div>
</div>

02.11.2018 15:24

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

Как разместить пользовательскую форму на веб-сайте на базе WordPress?

Проблема с изменением цвета шрифта ссылки с помощью typography.js в gatsby

Внутренние границы гибких элементов с зазорами

Как получить путь к изображению из файла JSON?

Как правильно отобразить и выровнять по центру мои адаптивные видео на YouTube?

Вложение scss с файлами main.scss и подкомпонентами scss

Css grid-row для повторяющихся строк

Переход от 'display: none' к 'display: inline' при нажатии

Как fadeIn / fadeOut H1 и фон в цикле с использованием JS

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

Высота ячейки таблицы IE11

Ответы 1

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

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