Question

我无法在导航栏中将两个项目对齐。我正在尝试将徽标放在左侧，将标签对齐在右侧。

我为链接创建了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>

Answer 1

使用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，有一个game可以轻松地教您所有必要的属性。视觉guide也将为您提供帮助。

Answer 2

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>

Answer 3

请尝试将您的代码更改为以下代码。

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;
}

Answer 4

@Hanan：无需使用float，只需要在导航栏中添加display: flex和justify-content: space-between广告

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>

Flexbox-如何在导航栏中对齐项目

4 个答案: