Flexbox的 - 如何对齐导航栏项目

问题描述 投票：0回答：4

我无法在我的导航栏对准两个项目一起。我试图把左标志和右对齐的标签。

我已创建为标志的链接和简单H1 LIS。我遇到的问题是，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>
html css flexbox
4个回答
2
投票

与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也将帮助你。

0
投票

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
投票

请尝试更改代码与波纹管。

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
投票

@Hanan：无需使用浮动只需要加入广告display: flex和justify-content: space-betweenin导航栏

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.