Заголовок вне строки

У меня есть ссылка, и она находится под моей шапкой. Я пробовал float:top (я даже не думаю, что это реально)

.header {
  background-color: grey;
  border-radius: 2px;
  padding: 1%;
  margin: 0%
}

#links {
  font-size: xx-large;
  text-align: right;
  color: white;
}

<div class = "header">
  <header>
    <h1>Jackson Pope</h1>
    <div id = "links">
      <a href = "about.html">About Me</a>
    </div>
  </header>
</div>

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

— 18.03.2022 18:29

Как должен выглядеть этот предполагаемый?

— 18.03.2022 18:29

Я хочу, чтобы текст «Обо мне» совпадал с текстом Джексона Поупа, извините, что не уточнил ранее.

— 18.03.2022 18:41

html css alignment

18.03.2022 18:10

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

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

Ответы 2

Если вы хотите, чтобы ссылка по-прежнему была закреплена вверху, используйте position: fixed;

.header {
  background-color: grey;
  border-radius: 2px;
  padding: 1%;
  margin: 0%
  padding-top: 10px;
}

#links {
  font-size: xx-large;
  text-align: right;
  color: white;
  position: fixed;
  top: 10px;
  right: 10px;
}

<div class = "header">
  <header>
    <h1>Jackson Pope</h1>
    <div id = "links">
      <a href = "about.html">About Me</a>
    </div>
  </header>
</div>

Но как бы я тогда совместил его с текстом «Джексон Поуп». Спасибо, Джексон Поуп.

— 18.03.2022 18:38

18.03.2022 18:23

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

header {
  background-color: grey;
  border-radius: 2px;
  padding: 1%;
  margin: 0%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#links {
  font-size: xx-large;
  text-align: right;
  color: white;
}

  <header>
    <h1>Jackson Pope</h1>
    <div id = "links">
      <a href = "about.html">About Me</a>
    </div>
  </header>

18.03.2022 18:29

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

Пытаюсь установить интервал в JS, чтобы изменить zIndex div

CSS изменить заполнение дочернего элемента

Кнопка не центрируется

Как применить эффект наведения к изображениям?

Как раскрасить только два элемента div одного класса или идентификатора?

Изменение меню работает отлично, но другие области, где у меня есть якоря, не работают

Кнопка «Подробнее» для текста внутри нескольких карточек, созданных с помощью *ngFor

Отрегулируйте ширину прямоугольника SVG в соответствии с его содержимым

Как я могу исправить высоту в MaterialUI?

Bulma flex оправдать содержимое не работает в reactjs

Заголовок вне строки

Ответы 2

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

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