时间戳

首页 > 解决方案 > 让 li 的分布在整个 ul navbar

html - 让 li 的分布在整个 ul navbar

问题描述

嘿，我想用 flexbox 制作一个导航栏。

如何使所有 3 li 分布在整个 ul 中，并且 li 之间的空间均匀？这是我的代码，但它不起作用:(我尝试证明内容：空格，但它不起作用。li仍然彼此靠近

/** global element styling **/

@import 'https://fonts.googleapis.com/css?family=Lato:400,700';

body {
  background-color: #eee;
  font-family: 'Lato', sans-serif;
}

.logo {
	flex-basis:40%;
	border: 1px solid red;
}

.logo img {
	width:100%;
	max-width: 300px;
}

header {
	display: flex;
}

header nav {
	border: 1px solid black;
	width: 60%;
	display: flex;
    flex-direction: row;
    justify-content: space-around;
}

header nav ul {

}

#nav-bar ul li {
	display: inline-flex;
	justify-content: space-between;
	flex: 1;
}
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Product Landing Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="page-wrapper">
<!--Header-->
	<header id="header">

<!-- Logo -->		
	<div class="logo">
			<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo" />
	</div>
<!-- Nav bar -->
	<nav id="nav-bar">
		<ul>
			<li><a class="nav-link" href="#features">Features</a></li>
			<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
			<li><a class="nav-link" href="#pricng">Pricing</a></li>
		</ul>
	</nav>

	</header>


</div>
</body>
</html>

我想要 Feaures，它的工作原理和定价都拥有 33% 的 ul

标签： htmlcss

解决方案

“flex”和 justify-content 位于父元素 (ul) 中。

像这样：

/** global element styling **/

@import 'https://fonts.googleapis.com/css?family=Lato:400,700';

body {
  background-color: #eee;
  font-family: 'Lato', sans-serif;
}

.logo {
	flex-basis:40%;
	border: 1px solid red;
}

.logo img {
	width:100%;
	max-width: 300px;
}

header {
	display: flex;
}

header nav {
	border: 1px solid black;
	width: 60%;
	display: flex;
    flex-direction: row;
    justify-content: space-around;
}

header nav ul {
    display: inline-flex;
	justify-content: space-between;
	flex: 1;
}

#nav-bar ul li {
	
}
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Product Landing Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="page-wrapper">
<!--Header-->
	<header id="header">

<!-- Logo -->		
	<div class="logo">
			<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo" />
	</div>
<!-- Nav bar -->
	<nav id="nav-bar">
		<ul>
			<li><a class="nav-link" href="#features">Features</a></li>
			<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
			<li><a class="nav-link" href="#pricng">Pricing</a></li>
		</ul>
	</nav>

	</header>


</div>
</body>
</html>

推荐阅读