Невозможно выровнять нижнюю границу ввода и текстовую область внутри таблицы div

Я пытаюсь выровнять нижнюю границу элемента ввода и текстовой области так, чтобы обе нижние границы ввода и текстовой области были точно выровнены и находились на одной линии. И элемент ввода, и текстовая область находятся внутри таблицы. Я создаю свою таблицу с помощью элементов div (отображение: {table, table-row-groupe, table-row и table-cell}). До сих пор мне не удалось решить проблему, и когда я просматриваю страницу в Firefox и Microsoft Edge , нижние границы, которые я обозначил белым цветом (на черном фоне), не выровнены по горизонтали.

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

Примечание. Чтобы этот тестовый пример работал, файлы CSS и HTML должны находиться в одном каталоге.

.DivTab {
  display: table;
  width: 100%;
  height: 100%;
  color: #ffffff;
  background-color: #000000;
}

.DivTabBody {
  display: table-row-group;
}

.DivTabRow {
  display: table-row;
  background-color: #000000;
}

.DivTabCell {
  display: table-cell;
  vertical-align: middle;
  text-align: start;
  padding-top: 0px;
  padding-bottom: 0px;
  color: #cfd0ce;
  background-color: #000000;
}

.KeyClass {
  background-color: #000000;
  color: #ffffff;
  padding-left: 5px;
  padding-right: 5px;
  border: none;
  border-bottom: solid #ffffff 1px;
  width: 100%;
  font-family: Consolas;
}

.ValueClass {
  background-color: #000000;
  color: #ffffff;
  padding-left: 5px;
  padding-right: 5px;
  border: none;
  border-bottom: solid #ffffff 1px;
  margin-left: 5px;
  resize: none;
  width: 95%;
  font-family: Consolas;
  overflow-y: hidden;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "utf-8">
  <title>Alignment example</title>
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <meta name = "description" content = "Input and Textarea align example">
  <link rel = "stylesheet" href = "styles.css">
</head>

<body style = "background-color: #000000;">
  <div style = "width: 60%;">
    <div class = "DivTab">
      <div class = "DivTabBody">
        <div class = "DivTabRow">
          <div class = "DivTabCell" style = "width: 30%;">
            <input id = "paramKey" type = "text" class = "KeyClass">
          </div>
          <div class = "DivTabCell" style = "width: 70%;">
            <textarea id = "paramValue" rows = "1" spellcheck = "false" class = "ValueClass"></textarea>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Не могли бы вы указать, в чем моя ошибка и как мне выровнять эти две нижние границы?

Заранее спасибо.

html css

16.08.2024 02:05

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

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

Ответы 3

Проблема с выравниванием нижней границы элемента ввода и текстовой области. используйте box-sizing: border-box в этих классах .KeyClass, .ValueClass, а также используйте vertical-align: middle; в классе .DivTabCell Вот рабочий пример с моей стороны:

test.html

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "utf-8">
    <title>Alignment example</title>
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <meta name = "description" content = "Input and Textarea align example">
    <link rel = "stylesheet" href = "styles.css">
</head>

<body style = "background-color: #000000;">
    <div style = "width: 60%;">
        <div class = "DivTab">
            <div class = "DivTabBody">
                <div class = "DivTabRow">
                    <div class = "DivTabCell" style = "width: 30%;">
                        <input id = "paramKey" type = "text" class = "KeyClass">
                    </div>
                    <div class = "DivTabCell" style = "width: 70%;">
                        <textarea id = "paramValue" rows = "1" spellcheck = "false" class = "ValueClass"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

стили.css

.DivTab {
       display: table;
       width: 100%;
       height: 100%;
       color: #ffffff;
       background-color: #000000;
    }
    
   .DivTabBody {
       display: table-row-group;
    }
    
    .DivTabRow {
       display: table-row;
       background-color: #000000;
     }
    
     .DivTabCell {
        display: table-cell;
        /* add changes */
        vertical-align: middle; 
        text-align: start;
        padding: 0;
        color: #cfd0ce;
        background-color: #000000;
     }
    
    .KeyClass,
    .ValueClass {
        background-color: #000000;
        color: #ffffff;
        padding-left: 5px;
        padding-right: 5px;
        border: none;
        border-bottom: solid #ffffff 1px;
        font-family: Consolas;
        /* changes */
        box-sizing: border-box;
        line-height: 1.5;
        vertical-align: bottom;
    }
    
    .KeyClass {
        width: 100%;
    }
    
    .ValueClass {
        margin-left: 5px;
        resize: none;
        width: calc(100% - 5px);
        overflow-y: hidden;
        height: 22px;
    }

Это работает на моей стороне, надеюсь, это сработает и на вас, спасибо.

Спасибо за ваше время и за вашу помощь.

— 16.08.2024 21:02

Спасибо, мы всегда здесь, чтобы помочь друг другу.

— 19.08.2024 06:17

16.08.2024 05:28

Если вам нужно выровнять элементы рядом, то использование flex будет гораздо лучшим вариантом. Говоря о проблеме, если вы проверите textarea, вы заметите, что он плавает в верхней части родительского div, и это вызывает проблему ввода и текстовой области, не выравниваемой по горизонтали, чтобы исправить это, просто добавьте display: flex; рядом с width: 70%;

Но если вы хотите сделать свой код более гибким, добавьте display: flex к DivTabRow и DivTabCell. Вы можете игнорировать использование display: table-cell;, если у вас нет особой необходимости.

Вот и все. Ниже приведен рабочий пример.

body{
  margin: 0;
  padding: 0;
  background-color: black;
}

.DivTab {
    display: table;
    width: 100%;
    height: 100%;
    color: #ffffff;
    background-color: #000000;
}

.DivTabBody {
    display: table-row-group;
}

.DivTabRow {
    display: flex;
    background-color: #000000;
}

.DivTabCell {
    display: flex;
    vertical-align: middle;
    text-align: start;
    padding-top: 0px;
    padding-bottom: 0px;
    color:  #cfd0ce;
    background-color: #000000;
}

.KeyClass {
    background-color: #000000;
    color: #ffffff;
    padding-left: 5px;
    padding-right: 5px;
    border: none;
    border-bottom: solid #ffffff 1px;
    width: 100%;
    font-family: Consolas;
}

.ValueClass {
    background-color: #000000;
    color: #ffffff;
    padding-left: 5px;
    padding-right: 5px;
    border: none;
    border-bottom: solid #ffffff 1px;
    margin-left: 5px;
    resize: none;
    width: 95%;
    font-family: Consolas;
    overflow-y: hidden;
}

<div style = "width: 60%;">
    <div class = "DivTab">
        <div class = "DivTabBody">
            <div class = "DivTabRow">
                <div class = "DivTabCell" style = "width: 30%;">
                    <input id = "paramKey" type = "text" class = "KeyClass">
                </div>
                <div class = "DivTabCell" style = "width: 70%;">
                    <textarea id = "paramValue" rows = "1" 
                        spellcheck = "false" class = "ValueClass"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>

Спасибо за помощь. Кажется, ваше решение работает в Microsoft Edge, но не в Firefox. Если вы посмотрите, вы заметите, что нижняя граница текстовой области все еще немного выше. Тот факт, что у меня есть таблица-ячейка, является обязательным требованием. Как я уже сказал, эти элементы находятся внутри таблиц (моделируются с помощью элементов div), и, если я не ошибаюсь, концепции display:flex и table несовместимы (по крайней мере, с table-cell).

— 16.08.2024 12:29

16.08.2024 05:59

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

Хорошо, я решил проблему. Главная проблема заключалась в том, что внутри ValueClass

Вместо

margin-left: 5px;

Мне пришлось написать:

margin: 0px;
margin-left: 5px;

Без этого, очевидно, существуют некоторые значения по умолчанию (которые мне неизвестны) для других полей.

Я также добавил text-align: bottom; в две ячейки, содержащие элементы input и textarea.

Я также добавил следующие строки в CSS (на основе ответа Вакаса):

box-sizing: border-box;
line-height: 1.2;
vertical-align: bottom;

Итак, для тех, кто, возможно, столкнулся с той же проблемой, вот новая рабочая версия:

HTML-файл (test.html):

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "utf-8">
  <title>Alignment example</title>
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <meta name = "description" content = "Input and Textarea align example">
  <link rel = "stylesheet" href = "styles.css">
</head>
<body style = "background-color: #000000;">

<div style = "width: 60%;">
    <div class = "DivTab">
        <div class = "DivTabBody">
            <div class = "DivTabRow">
                <div class = "DivTabCell" style = "width: 30%; vertical-align: bottom;">
                    <input id = "paramKey" type = "text" class = "KeyClass">
                </div>
                <div class = "DivTabCell" style = "width: 70%; vertical-align: bottom;">
                    <textarea id = "paramValue" rows = "1" 
                        spellcheck = "false" class = "ValueClass"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Файл CSS (styles.css):

body{
  margin: 0;
  padding: 0;
  background-color: black;
}

.DivTab {
    display: table;
    width: 100%;
    height: 100%;
    color: #ffffff;
    background-color: #000000;
}

.DivTabBody {
    display: table-row-group;
}

.DivTabRow {
    display: table-row;
    background-color: #000000;
}

.DivTabCell {
    display: table-cell;
    vertical-align: middle;
    text-align: start;
    padding-top: 0px;
    padding-bottom: 0px;
    color:  #cfd0ce;
    background-color: #000000;
}

.KeyClass {
    background-color: #000000;
    color: #ffffff;
    padding-left: 5px;
    padding-right: 5px;
    border: none;
    border-bottom: solid #ffffff 1px;
    width: 100%;
    font-family: Consolas;
    box-sizing: border-box;
    line-height: 1.2;
    vertical-align: bottom;
}

.ValueClass {
    background-color: #000000;
    color: #ffffff;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0px;
    margin-left: 5px;
    border: none;
    border-bottom: solid #ffffff 1px;
    resize: none;
    width: 95%;
    font-family: Consolas;
    overflow-y: hidden;
    box-sizing: border-box;
    line-height: 1.2;
    vertical-align: bottom;
}

Я тестировал Firefox (версия: 129.0.1 – 64 бит) и Microsoft Edge (версия: 127.0.2651.98 – 64 бит), и он работал в обоих браузерах.

16.08.2024 21:01