Question

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

如何使所有三个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，它的工作原理和价格都包含ul的33％

Answer 1

“ flex”和辩解内容位于父元素（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>

让李传遍整个ul导航栏

1 个答案: