Мой второй вопрос здесь.Я смог сделать эту работу с помощью CSS без flexbox.
Я вставил код для выше здесь:
https://codepen.io/kkpm/pen/MWgdOZE
html,
body {
margin: 0px;
padding: 0px;
}
nav {
height: 60px;
background-color: maroon;
vertical-align: middle;
}
#links {
float: right;
line-height: 60px;
}
#links li {
display: inline-block;
}
#links li a {
display: table-cell;
vertical-align: middle;
height: auto;
padding: 1%;
padding-right: 20px;
padding-left: 28px;
color: white;
text-decoration: none;
}
#links li a:hover {
display: table-cell;
vertical-align: middle;
height: auto;
padding: 1%;
padding-right: 20px;
padding-left: 28px;
background-color: blue;
color: white;
text-decoration: none;
}
#links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#logo {
float: left;
}
HTML ниже
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav id="navbar">
<div id="logo"><img src="flag.JPG" alt="" height="60px" /></div>
<div id="links">
<ul>
<li><a href="#">Welcome</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<section id="welcome">Hi!</section>
</body>
</html>
Проблема с приведенным выше кодом заключается в том, что я настраивал пиксель на глаз.Я хочу всегда центрировать текст <li> по вертикали , в то время как заполняет область синего прямоугольника вокруг него, из-за отсутствия лучшего термина для ее описания, ячейка, несмотря ни на что.
Как получить тот же результат, используя flexbox (или любой другой метод) без использования javascript для форматирования <ul>/<li> элементов?
Это сводит меня с умапытаюсь сделать это.Я тщательно искал в Google.Однако у меня трудное время, потому что мое понимание flexbox слабое.
Некоторые вещи, которые я пробовал:
- Я установил отступы и поля на 0px для
* - Я установил размер поля на
border-box для HTML - Я установил
nav на 60px
, затем попытался установить nav li на
display: flex;
justify-content: flex-end; - для логотипа div Я поставил его как фиксированное положение и
justify-content: flex-start - Я читал этот сайт, пытаясь отформатировать этот https://css -tricks.com / snippets / css / a-guide-to-flexbox /
Проблема в том, что я не могу получить ссылки на центр и выделенную синим цветом область, чтобы выделить, как следует.Я очень запутался с flexbox, и если бы кто-то мог, пожалуйста, направить меня шаг за шагом в его / ее мыслительный процесс относительно того, как получить результат ниже, используя flexbox, я был бы очень признателен.Я буду изучать ваш ответ снова и снова, пока не научусь создавать эту фиксированную панель навигации.