Размещение элемента слева от моей страницы
Здравствуйте, я новичок в HTML/CSS, и мне нужна помощь: моя страница Как я могу поместить ПОРТФОЛИО в левый край моей страницы. Вот мой код: HTML:
<nav>
<ul id = "nav">
<li class = "nav-item">PORTFOLIO</li>
<li class = "nav-item">Présentaion</li>
<li class = "nav-item">Réalisations</li>
<li class = "nav-item">Mon CV</li>
<li class = "nav-item">Me contacter</li>
</ul>
</nav>
CSS:
#nav{
display : flex;
text-transform: uppercase;
justify-content:center;
align-items: center;
}
.nav-item{
text-decoration : none;
list-style : none;
text-transform: uppercase;
margin-right: 2em;
font-family: 'Oswald', sans-serif;
}
.nav-item:first-child{
font-size:30px;
}
Итак, я создал список для создания навигационной панели, я использую display fex, чтобы он был на одной линии, я использую justify-content для центрирования моей навигационной панели и align-items для ее центрирования по горизонтали. Что я могу добавить в .nav-item:first-child, чтобы текст ПОРТФОЛИО был в самом левом углу страницы.
Это то, чего я хотел бы добиться страница
Спасибо, что читаете меня и помогаете мне
Я пробовал оправдать себя, левое свойство, выровнять себя...
Хорошо, я редактирую свой первый пост, чтобы вы могли видеть
Это означает, что ПОРТФОЛИО слева, а эти Презентации, Реализации, Mon CV и Me contacter находятся в центре страницы?
Да, я хотел бы быть в одном списке, но ПОРТФОЛИО (первый пункт списка) находится слева, а остальные элементы списка все в центре
Ответы 2
Решение будет отличаться в зависимости от того, какой визуальный результат вы хотите получить. Судя по контексту, вы хотите, чтобы элемент «Портфолио» был на краю, а все остальные элементы — в центре, верно?
Конечно, здесь можно просто сделать простое абсолютное позиционирование, но в этом случае оно будет перекрываться кнопками, если ширины экрана будет недостаточно, поэтому лучше использовать другой подход:
- Разделите ваши кнопки и ваш логотип, чтобы они были двумя дочерними элементами вашего внешнего контейнера.
- Включите flexbox для вашего навигационного контейнера и выровняйте все по центру
- Добавьте свойство
flex: 1в контейнер кнопок навигации, чтобы он занимал все доступное пространство. - Определите ширину вашего логотипа (например, 150 пикселей), если вам нужно строго центрировать кнопки навигации на следующем шаге.
- Чтобы компенсировать наличие логотипа и строго центрировать кнопки (при необходимости), создайте правое поле для кнопок навигации.
См. следующий пример:
body {
margin: 0;
font-size: 12px;
}
.nav {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.logo {
justify-self: start;
width: 150px;
text-align: center;
}
#nav-buttons {
display: flex;
text-transform: uppercase;
justify-content: center;
align-items: center;
margin-right: 150px;
padding: 0;
flex: 1;
}
.nav-item {
list-style: none;
margin-right: 10px;
}<!DOCTYPE html>
<html lang = "en">
<body>
<nav class = "nav">
<div class = "logo">PORTFOLIO</div>
<ul id = "nav-buttons">
<li class = "nav-item">Présentaion</li>
<li class = "nav-item">Réalisations</li>
<li class = "nav-item">Mon CV</li>
<li class = "nav-item">Me contacter</li>
</ul>
</nav>
</body>
</html>Однако будьте осторожны: этот дизайн не будет хорошо смотреться на маленьких экранах. Удачи в изучении Web!
большое спасибо, Дэвид ценю вашу помощь
Ответ уже есть. Я просто добавил свой на всякий случай.
#nav{
display : flex;
text-transform: uppercase;
justify-content:center;
align-items: center;
}
.nav-item{
text-decoration : none;
list-style : none;
text-transform: uppercase;
margin-right: 2em;
font-family: 'Oswald', sans-serif;
}
.nav-item:first-child{
position:fixed;
left: 0;
margin: 1rem;
font-size:30px;
}<nav>
<ul id = "nav">
<li class = "nav-item">PORTFOLIO</li>
<li class = "nav-item">Présentaion</li>
<li class = "nav-item">Réalisations</li>
<li class = "nav-item">Mon CV</li>
<li class = "nav-item">Me contacter</li>
</ul>
</nav>
Пожалуйста, покажите изображение конечного результата, которого вы хотите достичь. Если вы просто хотите отобразить свою навигацию с левой стороны, вы можете просто поставить
float:leftна свой класс навигации в вашем css.