Flexbox - Как выровнять элементы в навигационной панели - PullRequest
Новая
       6

Flexbox - Как выровнять элементы в навигационной панели

0 голосов
/ 06 февраля 2019

У меня проблемы с выравниванием двух элементов в моей панели навигации.Я пытаюсь вывести логотип слева и выровнять вкладки справа.

Я создал lis для ссылок и простой h1 для логотипов.Проблема, с которой я столкнулся, заключается в том, что h1 занимает все пространство и подталкивает lis к следующей строке, я пытался сделать несколько вещей, но не могу понять, где я ошибаюсь.

body {
  margin: auto
}


/*navbar*/

.main-nav {
  display: flex;
  list-style: none;
  font-size: 0.7em;
  float: right;
}

li {
  padding: 20px;
}

a {
  color: black;
  text-decoration: none;
}
<!DOCTYPE html>
<html>

<head>
  <title>My site</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <header>
    <nav class="navbar">
      <h1>My Site</h1>
      <ul class="main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

Ответы [ 4 ]

0 голосов
/ 06 февраля 2019

@ Ханан: не нужно использовать float, просто нужно добавить display: flex и justify-content: space-between в navbar 

body {
	margin: auto
}

/*navbar*/

.main-nav {
	display: flex;
	list-style: none;
	font-size: 0.7em;
/* 	float: right; */remove
}
.navbar {
    display: flex;
    justify-content: space-between;
}

li {
	padding: 20px;
}

a {
	color: black;
	text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
	<title>My site</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
		<nav class="navbar">
			<h1>My Site</h1>
			<ul class="main-nav">
				<li><a href="#">Home</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
	</header>
</body>
</html>
0 голосов
/ 06 февраля 2019

Flexbox - самый простой способ.Для h1 установлено flex: 1 auto.Это заставит его расти, чтобы заполнить оставшееся пространство.Все навигационные ссылки будут просто занимать необходимое пространство.Это также работает при переносе ссылок в другой элемент, такой как ul/li

.navbar {
  display: flex;
  align-items: center;
  width: 100%;
}

.navbar h1 {
  flex: 1 auto;
}

.navbar a {
  padding: 0 0.5em;
}
<header>
  <nav class="navbar">
    <h1>My Site</h1>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </nav>
</header>
0 голосов
/ 06 февраля 2019

пожалуйста, попробуйте изменить код ниже. 

body {
    margin: auto
}

/*navbar*/
.navbar {
    display: flex;
    justify-content: space-around;
}

.main-nav {
    list-style: none;
    font-size: 0.7em;
}

li {
    padding: 20px;
    float: left;
}

a {
    color: black;
    text-decoration: none;
}
0 голосов
/ 06 февраля 2019

Вы не должны использовать поплавки при работе с Flexbox.Flexbox заботится о выравнивании ваших предметов так, как вы хотите.Если вы хотите, чтобы два столбца в одной строке, добавьте display:flex в родительский.Если вы хотите одну слева и одну справа, используйте justify-content: space-between; 

body {
  margin: auto
}


/*navbar*/

.navbar {
  display: flex;
  justify-content: space-between;
}

.main-nav {
  display: flex;
  list-style: none;
  font-size: 0.7em;     
}

li {
  padding: 20px;
}

a {
  color: black;
  text-decoration: none;
}
<!DOCTYPE html>
<html>

<head>
  <title>My site</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <header>
    <nav class="navbar">
      <h1>My Site</h1>
      <ul class="main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

Чтобы понять Flexbox, существует игра , которая научит вас всем необходимым свойствам простым способом.Это визуальное руководство также поможет вам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...