Как я могу разделить содержимое <a> и <nav> в <header> моего HTML на левое и правое в одном родительском блоке с помощью CSS?

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

Итак, в моем HTML-файле то, чем я пытаюсь манипулировать, написано следующим образом:

     <header>
          <div class = "content">
            <a href = "index.html" class = "desktop logo">Fotomatic</a>
            <nav class = "desktop">
              <ul>
                <li><a href = "#">Product detail</a></li>
                <li><a href = "#">About us</a></li>
                <li>
                  <a href = "https://www.instagram.com/"
                    >Follow us
                    <img class = "icon" src = "./resources/images/instagram.png"
                  /></a>
                </li>
              </ul>
            </nav>

На веб-сайте идея заключается в том, что «Fotomatic» должен оставаться слева от навигации, а элементы <ul> — справа от навигации. Вот макет того, как это должно выглядеть:

Мокап

Мой CSS для моей текущей сборки выглядит следующим образом:

header {
  position: fixed;
  width: 100%;
  border-bottom: solid 1px #c6c1c1;
  background-color: white;
  z-index: 1;
}

header .content {
  display: flex;
  align-items: center;
  padding: 1.875rem;
}

header .desktop {
  font-family: Roboto-Mono-Regular;
  font-size: 2rem;
  color: #4a4a4a;
}

header nav ul {
  display: flex;
  font-size: 1rem;
  font-family: Roboto-Regular;
  line-height: 1.6;
}

nav li {
  padding-left: 3.5rem;
}

nav a {
  vertical-align: bottom;
  line-height: 1.6;
  font-size: 1rem;
  color: #4a4a4a;
}

header .icon {
  width: 1rem;
  padding-left: .75rem;
}

Приведенные выше правила CSS дают следующий результат:

Результат исходного кода

Учитывая, что это мое первое знакомство с флексбоксами, я провел собственное исследование.

Я пробовал много вещей, от простых идей, таких как простое перемещение элемента <ul> вправо, выравнивание текста, до попыток манипулировать флексбоксами.

Завершение того, что я хотел, было с помощью строки правила CSS поля, например:

header .desktop {
  font-family: Roboto-Mono-Regular;
  font-size: 2rem;
  color: #4a4a4a;
  margin-left: auto;
}

Приведенные выше правила CSS дали такой результат:

Результат поля слева: авто; правило на родительском рабочем столе

В результате у меня вытянулась вся коробка, не только элементы <ul>, но и «Fotomatic» <a>.

Теперь, хотя это не тот результат, который я ожидал, насколько я понимаю, он вёл себя таким образом, потому что элемент <a> также является дочерним для .desktop.

Итак, я попробовал то же самое margin-left:auto;, только в элементах <ul>, но ничего не произошло:

header nav ul {
  display: flex;
  font-size: 1rem;
  font-family: Roboto-Regular;
  line-height: 1.6;
  margin-left: auto;
}

Результат поля слева: авто; правило для <ul>, дочерний элемент для .desktop

Я предполагаю, что либо я еще не совсем правильно понимаю, как работают флексбоксы, либо существует другое правило CSS, которое не позволяет мне манипулировать навигацией заголовка <ul>, как я ожидал.

Любые другие случаи, когда header имеет правила CSS, находятся в пределах @media правила, в котором размер экрана меньше, поэтому я вообще не считаю, что это проблема, поэтому я не включил их, чтобы сделать этот вопрос как можно более «коротким». .

Я знаю, что ответ, вероятно, смотрит мне в лицо, но я не могу его найти.

Спасибо всем заранее!

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

Brett Donald 18.08.2024 00:54

Чтобы людям было легче понять вопрос и ответить на него, вы можете использовать фрагменты, чтобы CSS и HTML отображались в вопросе. Тогда другие смогут скопировать ваш фрагмент в свой ответ (с любыми предлагаемыми изменениями).

alexanderbird 18.08.2024 01:14
Улучшение производительности загрузки с помощью 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
2
62
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ваша идея использования поля: left; правильно и работает, однако его следует добавить в навигацию, а не в ул. Вот рабочий пример:

header {
  position: fixed;
  width: 100%;
  border-bottom: solid 1px #c6c1c1;
  background-color: white;
  z-index: 1;
}

header .content {
  display: flex;
  align-items: center;
  padding: 1.875rem;
}

header .desktop {
  font-family: Roboto-Mono-Regular;
  font-size: 2rem;
  color: #4a4a4a;
}

header nav ul {
  display: flex;
  font-size: 1rem;
  font-family: Roboto-Regular;
  line-height: 1.6;
}

.content nav {
  margin-left: auto;
  margin-right:30px;
  /*This is the change required*/
}

nav li {
  padding-left: 3.5rem;
  display: flex;
  /*Only added to remove the decoration on the list items*/
}

nav a {
  vertical-align: bottom;
  line-height: 1.6;
  font-size: 1rem;
  color: #4a4a4a;
}

header .icon {
  width: 1rem;
  padding-left: .75rem;
}
<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Portfolio</title>
  <link rel = "stylesheet" href = "style.css">
</head>

<body>
  <header>
    <div class = "content">
      <a href = "index.html" class = "desktop logo">Fotomatic</a>
      <nav class = "desktop">
        <ul>
          <li><a href = "#">Product detail</a></li>
          <li><a href = "#">About us</a></li>
          <li>
            <a href = "https://www.instagram.com/">Follow us
              <img class = "icon" src = "./resources/images/instagram.png"
            /></a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
</body>

</html>

По желанию в макете к навигационной панели было добавлено правое поле размером 30 пикселей.

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

Кроме того, я добавил CSS в .content nav и рекомендую вам изменить остальную часть CSS, включив либо имя класса, либо тег заголовка для конкретизации, поскольку это поможет позже на странице.

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

В флексбоксе с двумя дочерними элементами, чтобы выровнять первый дочерний элемент слева и второй дочерний элемент справа, используйте justify-content: space-between.

body {
  margin: 0 1em 1em;
  background: #f2f2f2;
}

header {
  position: sticky;
  top: 0;
  border-bottom: solid 1px #c6c1c1;
  background-color: white;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.875rem;
  box-sizing: border-box;
  color: #4a4a4a;
  margin: 0 -1em;
}

header a {
  color: inherit;
  text-decoration: none;
}

header .a1 {
  font-size: 2em;
}

header nav {
  display: flex;
  gap: 1em;
}

header .icon {
  width: 1em;
  padding-left: .75em;
  vertical-align: middle;
}
<header>
    <a href = "index.html" class = "a1">Placeholder</a>
    <nav>
      <a href = "#">Product detail</a></li>
      <a href = "#">About us</a></li>
      <a href = "https://www.instagram.com/">Follow us <img class = "icon" src = "https://picsum.photos/30"/></a>
    </nav>
</header>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.
</p>
<p>
Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas. Quisque eget augue vitae purus placerat pharetra. Aliquam rhoncus convallis lorem, sed facilisis odio blandit scelerisque. Vivamus viverra urna ac nulla interdum, eget ullamcorper leo maximus. Mauris nec feugiat enim. Nam congue, dui sit amet vestibulum posuere, leo mauris fermentum lorem, eget bibendum velit nunc quis leo.
</p>
<p>
Curabitur eget ullamcorper justo, sit amet dictum neque. Fusce vitae ligula et felis auctor vulputate vel suscipit nibh. Integer a felis varius purus vestibulum viverra. Morbi venenatis placerat augue sit amet commodo. Sed dapibus molestie eros, vitae ultrices nunc commodo aliquam. Vivamus tempus mollis massa vel egestas. Donec ut ante quis eros commodo volutpat. Proin sem nisi, viverra ac sem tristique, consectetur laoreet sapien. Vivamus suscipit orci vel euismod scelerisque. Nullam sed pulvinar tellus. Nullam pulvinar arcu eget nibh rutrum, eget faucibus ligula ullamcorper.
</p>
<p>
Sed sed cursus leo. Nam molestie eleifend leo, nec fermentum risus maximus ac. Pellentesque eget placerat ipsum. Vestibulum tempor quam justo. Fusce dapibus turpis non ante faucibus suscipit. Fusce rhoncus eleifend ipsum et lacinia. Curabitur nec congue arcu. Mauris dignissim magna ligula. Nullam ultrices, metus sit amet ultrices porttitor, turpis ligula interdum enim, eu pellentesque purus quam ut arcu. Nullam aliquet vitae tortor vel tincidunt. Fusce maximus lacus diam, sed elementum ligula condimentum vel. Sed consequat orci ac nunc gravida, at accumsan magna porttitor.
</p>
<p>
Mauris vulputate quam ac purus laoreet, nec ultrices eros placerat. Fusce id nisi ex. Nunc ornare tellus nisl, suscipit fermentum quam sodales sit amet. Ut ex magna, tempor nec ex sed, ornare ornare sem. Proin gravida turpis urna, vitae posuere purus consequat sit amet. Donec laoreet tempor massa. Praesent porta mauris vitae neque condimentum, non volutpat felis eleifend.
</p>
<p>
Aliquam aliquam a est eget cursus. Ut eu tempus justo, rutrum dapibus ex. In hac habitasse platea dictumst. Nulla ornare nisi sit amet arcu semper maximus. Praesent eu augue eget mi sodales sodales. Praesent sodales neque malesuada, euismod est in, lobortis turpis. Nam blandit facilisis mauris. Ut ac ex rhoncus, ornare velit ac, aliquam nibh. Quisque euismod mauris quis nisl consectetur vulputate. Pellentesque mattis, tellus ut dictum dictum, urna ligula sodales magna, euismod malesuada ipsum quam nec elit.
</p>
<p>
Duis sit amet eros non est lacinia posuere et et ex. Proin in dui ornare ex eleifend pharetra. Etiam eros urna, euismod eget porttitor et, tempor quis turpis. Nullam sollicitudin suscipit lorem, maximus pellentesque turpis dictum sed. Integer fringilla gravida tellus sit amet facilisis. Pellentesque vel porta justo. Proin vehicula eget tortor ut condimentum. Phasellus interdum urna a condimentum dapibus. Sed commodo elit a metus vestibulum, ac vehicula mi tincidunt. Duis ante quam, posuere eget purus et, mollis congue tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc quis orci porttitor, dictum libero sit amet, feugiat ipsum.
</p>
<p>
Nunc auctor lorem vitae neque sodales cursus. Sed scelerisque tempor tincidunt. Praesent eu pretium mi. Duis vitae venenatis nunc. Integer dolor sapien, vehicula ac dui id, fermentum malesuada justo. Donec ullamcorper enim sed nulla egestas condimentum. Etiam vitae dapibus sem, ut efficitur nulla. Donec laoreet, nunc quis aliquet blandit, erat nibh facilisis nibh, ut fermentum nisl dolor vel dui. Nunc pulvinar scelerisque urna, ut dictum purus placerat ac.
</p>
<p>
Nam mattis ipsum at metus placerat maximus. Sed sed enim nunc. Aenean dapibus, lorem non congue volutpat, tortor orci egestas leo, eu efficitur erat orci sit amet libero. Praesent quis convallis metus. Cras eget ligula nec tortor mollis vestibulum et facilisis tellus. Aliquam erat volutpat. Sed malesuada, lectus vulputate tristique mattis, lacus nisl tempus sem, in aliquet dolor neque sed nisl. Nulla facilisi. Nulla a pharetra felis, eu aliquet urna. Phasellus mattis mauris eget mauris laoreet, et accumsan magna laoreet. Maecenas a condimentum diam. Integer et neque odio.
</p>
<p>
Etiam feugiat tempus nibh, quis mattis enim porttitor eu. Praesent congue gravida nisi, sit amet convallis lectus sagittis et. Praesent rutrum ante nec lectus congue, congue pharetra sem efficitur. Vivamus eros mauris, pellentesque in aliquam at, vehicula consequat neque. Sed in pharetra lorem. Vivamus porttitor lectus risus. Vestibulum malesuada vestibulum ullamcorper. Nulla lacus purus, faucibus sit amet urna ac, placerat congue lectus. Ut iaculis risus eu pretium cursus. Quisque ac pharetra orci, ut convallis libero. Praesent auctor commodo quam sit amet aliquam. Integer tortor neque, cursus sit amet maximus sit amet, ultrices sed arcu. Nulla volutpat libero non ipsum auctor consectetur. Cras non malesuada felis, vel maximus ligula. Curabitur euismod porta semper. Ut posuere eget libero ac consequat.
</p>
<p>
Mauris tristique, leo sit amet aliquam varius, urna elit scelerisque nisi, non iaculis lectus augue id sapien. Phasellus euismod tellus in sodales finibus. Suspendisse potenti. Aenean malesuada sapien quis eleifend volutpat. Cras quam arcu, iaculis vel ornare vulputate, feugiat quis enim. Nullam auctor, libero vestibulum imperdiet tincidunt, justo tellus varius justo, a finibus magna purus eu est. Nam interdum odio in ligula ultricies, quis pulvinar lectus pulvinar. Fusce quis sem tincidunt, mattis massa eu, bibendum enim. Vivamus arcu arcu, aliquam eget suscipit id, tempor sed nibh. Nullam mi mauris, facilisis vitae massa a, facilisis vulputate velit. Phasellus facilisis egestas erat id elementum.
</p>
<p>
Proin non libero tortor. Nam scelerisque vel odio interdum pretium. Sed non metus magna. Praesent ullamcorper venenatis risus, quis semper purus. Donec vitae lectus id magna dignissim laoreet at ac urna. Aenean sapien dolor, egestas vitae nisl quis, ornare ullamcorper nibh. Nulla facilisi. Fusce maximus dapibus scelerisque. Donec sagittis leo mi, eget aliquet odio sodales rhoncus.
</p>
<p>
Nunc sollicitudin risus feugiat lacinia luctus. Vivamus iaculis ultrices blandit. Sed lobortis varius dapibus. Fusce vel justo eu est elementum ultricies eget vel dolor. Donec faucibus ex eget leo interdum, maximus accumsan orci pellentesque. Suspendisse interdum dolor lectus, et venenatis massa posuere eu. Etiam cursus lorem vitae tortor consectetur vestibulum.
</p>
<p>
Maecenas id lectus at velit euismod venenatis a ac dolor. Nullam quis volutpat ante, eu congue quam. Aliquam a gravida massa. Ut hendrerit in odio sed fermentum. Aliquam erat volutpat. Donec sed odio interdum, aliquam augue a, vulputate lorem. Nulla sed mattis odio. Sed volutpat tincidunt mauris sit amet porta. Etiam non nisi odio.
</p>

Эта статья представляет собой идеальный обучающий ресурс и справочную страницу по flexbox.

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