我终于实现了制作一个导航栏,文本左对齐,中间有小间距。我认为使用弹性项目不是最好的方法。请教我如何将导航栏与左侧的空格对齐
<link rel="stylesheet" href="styles.css" type="text/css">
<body>
<nav class="container">
<p class="item1">Events</p>
<p class="item2">Results</p>
<p class="item3">Partnering Restaurants</p>
</nav>
</body>
*{
margin: 0%;
padding: 0%;
}
.container{
display: flex;
justify-content: flex-start;
width: 100%;
height: 1.5em;
border: solid black 1px;
background-color: aqua;
color: blue;
}
.item1{
flex: 0.1;
}
.item2{
flex: 0.1;
}
.item3{
flex: 1;
}
答案 0 :(得分:1)
我假设您的导航栏有链接,因此链接的最佳语义标签是 <a>
。
如果使用 <a>
而不是 <p>
,则不需要添加 flexbox 样式,因为 a
是内联元素。
* {
margin: 0%;
padding: 0%;
}
.container {
border: solid black 1px;
background-color: aqua;
color: blue;
padding: 12px;
}
.container a {
text-decoration: none;
margin: 0 4px;
}
<nav class="container">
<a class="item1" href="page1">Events</a>
<a class="item2" href="page2">Results</a>
<a class="item3" href="page3">Partnering Restaurants</a>
</nav>
答案 1 :(得分:0)
这是您要找的吗?
*{
margin: 0%;
padding: 0%;
}
.container{
display: flex;
justify-content: flex-start;
width: 100%;
height: 1.5em;
border: solid black 1px;
background-color: aqua;
color: blue;
}
nav p {
padding: 0 10px;
}
<nav class="container">
<p class="item1">Events</p>
<p class="item2">Results</p>
<p class="item3">Partnering Restaurants</p>
</nav>
由于 nav
有链接,请使用 <a>
而不是 <p>
。所以你的 nav
标记应该类似于:
<nav class="container">
<a class="item1" href="#">Events</a>
<a class="item2" href="#">Results</a>
<a class="item3" href="#">Partnering Restaurants</a>
</nav>
答案 2 :(得分:0)
请明确您的问题 但这是我找到的解决方案
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<nav class="container">
<p class="item1">Events</p>
<p class="item2">Results</p>
<p class="item3">Partnering Restaurants</p>
</nav>
</body>
</html>
这里是css
*{
margin: 0%;
padding: 0%;
}
.container{
display: flex;
padding: 10px 2%;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 1.5em;
border: solid black 1px;
background-color: aqua;
color: blue;
}
.container > *{
width: auto;
padding-right: 5%;
}
我所做的改变
顶部和底部填充 不需要这个
.item1{
flex: 0.1;
}
.item2{
flex: 0.1;
}
.item3{
flex: 1;
}
使用这个>*