Выровняйте содержимое относительно флажка с помощью CSS

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

.checkbox-container {
  display: flex;
  align-items: flex-start;
}

.checkbox-container input[type = "checkbox"] {
  margin-right: 8px;
  /* Optional: Add space between checkbox and paragraph */
}

<div class = "checkbox-container">
  <input type = "checkbox" id = "myCheckbox">
  <p>This is a paragraph next to a checkbox.This is a paragraph next to a checkbox.This is a paragraph next to a checkbox.This is a paragraph next to a checkbox.This is a paragraph next to a checkbox.This is a paragraph next to a checkbox.This is a paragraph
    next to a checkbox.</p>
</div>

вывод такой

Здесь я хочу начать следующую строку с начала, как показано на изображении.

Любое решение. Спасибо.

«Выход такой» — а что насчет того, что это не так, как вы хотите? Если не считать того, что вы вручную добавили эти красные линии, второе изображение выглядит совершенно идентично?

— 02.08.2024 10:57

@CBroe Не могли бы вы проверить еще раз, я добавил скриншот во второй строке, мне нужно, чтобы буквы начинались с исходной позиции

— 02.08.2024 11:02

Тогда использование flexbox в контейнере, конечно, совершенно неправильный выбор.

— 02.08.2024 11:12

html css

02.08.2024 10:50

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

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

Ответы 1

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

Что вы можете сделать, так это изменить тег <p> на display: inline, таким образом оба встроенных элемента сольются в одну строку.

.checkbox-container p {
  display: inline;
  margin-inline-start: 8px;
}

<div class = "checkbox-container">
  <input type = "checkbox" id = "myCheckbox">
  <p>This is a paragraph next to a checkbox.This is a paragraph next to a checkbox.This is a paragraph next to a checkbox.This is a paragraph next to a checkbox.This is a paragraph next to a checkbox.This is a paragraph next to a checkbox.This is a paragraph
    next to a checkbox.</p>
</div>

Правильный способ — изменить тег <p> на <label> и назначить атрибут for тому же id из <input>, таким образом, по умолчанию они находятся в одной строке, щелчок по тексту также автоматически переключит флажок.

.checkbox-container input[type='checkbox'] {
  margin-inline-end: 8px;
}

<div class = "checkbox-container">
  <input type = "checkbox" id = "myCheckbox">
  <label for = "myCheckbox">This is a paragraph next to a checkbox.This is a paragraph next to a checkbox.This is a paragraph next to a checkbox.This is a paragraph next to a checkbox.This is a paragraph next to a checkbox.This is a paragraph next to a checkbox.This is a paragraph
    next to a checkbox.</label>
</div>

Спасибо, это работает, не могли бы вы сообщить мне, можем ли мы добавить немного места между флажком и тегом абзаца?

— 02.08.2024 11:19

Вы все равно можете добавить немного горизонтального интервала, добавив margin-right: 8px (или margin-inline-end) к <input>. Как показано в обновленном ответе.

— 02.08.2024 11:24

02.08.2024 11:07