Как убрать лишний пробел после Label/Div

У меня есть два текстовых поля, которые я хочу выстроить друг под другом. Я поставил прокладку div спереди шириной 2em и цветом фона, чтобы во время тестирования можно было увидеть, насколько велика прокладка. Перед одним из них должен быть label, который я помещаю внутрь разделителя div, чтобы текстовое поле с label и без него по-прежнему имело одинаковое пространство друг перед другом.

Теперь проблема в том, что он всегда добавляет немного пробела, например, пробел между label и текстовым полем. Это не работает для текстового поля без label.

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

Я также пробовал различные способы удаления padding или margin безуспешно. Я даже пытался добавить &nbsp перед div во втором текстовом поле, чтобы добавить пробел, но тогда это пространство было немного больше, чем от label.

Это HTML-код, созданный, когда я открываю исходный код в Chrome. Вы не сможете увидеть дополнительное место здесь, что расстраивает, но оно есть на моем сайте.

<div class = "row">
    			<div class = "col-md-12">
    				<div style = "width:2em; height: 1em;background-color:mediumvioletred; float:left;"><label for = "veranstaltungsnamea">a)</label></div>
    				<input type = "text" name = "veranstaltungsnamea" id = "veranstaltungsnamea" value = "k" 
    				onchange = "veranstaltungteilprüfung('a')" placeholder = "deutsch" style = "width:90%; margin-left:6;" >
    			</div>
            </div>

            <div class = "row">
                <div class = "col-md-12">
                    <div style = "width:2em; height: 1em;background-color:mediumvioletred; float:left;"></div>
    				<input type = "text" name = "veranstaltungsnameengla" id = "veranstaltungsnameengla" placeholder = "englisch" value = "l" 
    				style = "width:90%;">
                </div>
    </div>

Превью с моего сайта: Как убрать лишний пробел после Label/Div

В моем PHP код выглядит так.

echo '
<div class = "row">
            <div class = "col-md-12">
                <div style = "width:2em; height: 1em;background-color:mediumvioletred; float:left;"><label for = "veranstaltungsname' . $id . '">'. $id . ')</label></div>
                <input type = "text" name = "veranstaltungsname' . $id . '" id = "veranstaltungsname' . $id . '" value = "';

        echo findValue('veranstaltungsname' . $id, $sheetData);

        echo '" 
                onchange = "veranstaltungteilprüfung(\'' . $id . '\')" placeholder = "deutsch" style = "width:90%; margin-left:6;" >
            </div>
        </div>

        <div class = "row">
            <div class = "col-md-12">
                <div style = "width:2em; height: 1em;background-color:mediumvioletred; float:left;"></div>
                <input type = "text" name = "veranstaltungsnameengl' . $id . '" id = "veranstaltungsnameengl' . $id . '" placeholder = "englisch" value = "';

        echo findValue('veranstaltungsnameengl' . $id, $sheetData);

        echo '" 
                style = "width:90%;">
            </div>
        </div>';

Запуск вашего фрагмента, кажется, работает правильно...

Usagi Miyamoto 10.04.2019 10:42

@UsagiMiyamoto Как я уже упоминал в своем вопросе, дополнительное пространство не отображается во фрагменте, но оно есть на моем веб-сайте.

alex 10.04.2019 10:47

Проверьте ответ ниже :)

Amarjit Singh 10.04.2019 10:48
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
3
160
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Да, в firefox есть проблема, я обновил ваш код, теперь он работает нормально. Проблема заключалась в том, чтобы margin ввести, сделать margin:0 ввести, это даст вам результаты.

<div class = "row">
    			<div class = "col-md-12">
    				<div style = "width:2em; height: 1em;background-color:mediumvioletred; float:left;"><label for = "veranstaltungsnamea">a)</label></div>
    				<input type = "text" name = "veranstaltungsnamea" id = "veranstaltungsnamea" value = "k" 
    				onchange = "veranstaltungteilprüfung('a')" placeholder = "deutsch" style = "width:90%; margin:0px;" >
    			</div>
            </div>

            <div class = "row">
                <div class = "col-md-12">
                    <div style = "width:2em; height: 1em;background-color:mediumvioletred; float:left;"></div>
    				<input type = "text" name = "veranstaltungsnameengla" id = "veranstaltungsnameengla" placeholder = "englisch" value = "l" 
    				style = "width:90%; margin:0px">
                </div>
    </div>

Могу ли я узнать причину, по которой не нравится ответ?

Amarjit Singh 10.04.2019 10:49

О, я даже не подумал проверить/изменить margin в самом текстовом поле! Спасибо, это была абсолютно проблема, и ее сразу же устранили. Ты посланник бога.

alex 10.04.2019 10:49

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