Почему text-align:right не работает в этом случае?

Я не уверен, можно ли публиковать URL-адрес сайта, но я все равно попробую. Я пытаюсь выровнять номер телефона в верхней части этого сайта (https://maisons-keyho.com/) по правому краю. Я думал, что свойство text-align для блочного элемента (родительский div) должно помочь, но оно не работает.

enter image description here

Однако следующий упрощенный код работает

<div class="header header_component header_component--linktext la_compt_iem la_com_action--linktext  strong" style="text-align:right">
        <a rel="nofollow" class="component-target" href="tel:0450775238">
            <span class="component-target-text">Appelez-nous au 04 50 77 52 38</span>
        </a>
    </div> 

Может ли кто-нибудь помочь мне понять, почему он не работает на сайте? и как выровнять по правому краю? У меня нет доступа к HTML-коду, и мне нужно будет сделать это, используя только CSS.

Я скопировал ваш код на HTML-страницу, над которой я работаю, и номер телефона отображается справа. Я использовал Firefox для тестирования. И ваш text-align: right определенно сделает это, поскольку он сдвинется влево, если я удалю этот стиль.

Cutey from Cute Code 10.04.2022 15:15

Может быть, это из-за какого-то другого CSS (поскольку вы только скопировали HTML). Это работает для вас на реальном сайте? На реальном сайте (maisons-keyho.com), если я выровняю текст: прямо с помощью Chrome Inspector, это не сработает. Я отредактировал свой скриншот, чтобы подчеркнуть, как я добавляю код с помощью Inspector.

Knownow 10.04.2022 15:25

Я посмотрел на вашу ссылку и, как вы упомянули, номер телефона отображается слева. Так что да, я предполагаю, что в вашем CSS есть что-то, что переопределяет ваш text-align:right. Интересно, может ли это быть глобальная инструкция CSS для тегов <a> или тегов <span> (оба внутри вашего родительского div).

Cutey from Cute Code 10.04.2022 15:27

Вы правы, тег <a> настроен на блокировку. Но я попытался изменить все на встроенный, но безуспешно.

Knownow 10.04.2022 15:33

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

Cutey from Cute Code 10.04.2022 15:36
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
5
39
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Я проверил это. Когда вы меняете ширину родительского div на 100% и выравниваете его по правому краю. Тогда это свойство работает.

Причина: Насколько мне известно, это свойство зависит от ширины элемента, к которому оно применяется. Когда вы делаете ширину родительского div равной 100%, это означает, что его ширина равна его родительскому элементу, который в данном случае является всей шириной заголовка.

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

Это может сбивать с толку, но если у вас есть сомнения, дайте мне знать.

Взгляните на это изображение

Я нашел то же самое в инспекторе Firefox. Элемент span заполняет ширину своего родительского элемента div, поэтому не будет казаться, что он перемещается, если родительский элемент div не установлен на полную ширину своего контейнера.

Dave Pritlove 10.04.2022 15:35

забавно, как этот сайт работает ;-)

Mauricio Gracia Gutierrez 10.04.2022 15:36

Да @DavePritlove. Это основная причина, по которой объект не работал. Я плохо объяснил, но ты ПОНЯЛ!!

RishavSharma 10.04.2022 15:45

Узнал что-то новое. Элемент div(header_component header_component--linktext la_compt_iem la_com_action--linktext strong) плавает. Таким образом, несмотря на то, что его блочный элемент, его ширина равна содержимому внутри (в противном случае 100%). Так что выравнивание текста не работает. Один из способов - сделать это на 100%, как предложил @RishavSharma.

Knownow 10.04.2022 16:00

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