容器内的全宽导航
[英]Full width navigation inside container
问题描述
I'm fairly new to HTML and I'm trying to recreate this wireframe example for a school assignment: 
我对HTML还是相当陌生，我正在尝试为学校作业重新创建此线框示例：
This is the code I wrote in order to get the result I'm aiming for: 这是我为获得目标结果而编写的代码：
/* Reset */ a { color: #000; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } body { margin: 0; font: 1.6rem Arial; } html { font-size: 62.5%; } *, *:before, *:after { box-sizing: border-box; } /* Container */ #container { margin: auto; padding: 0 3rem; max-width: 96rem; } /* Header */ header { width: 100%; padding: 2.5rem; background: lightgrey; } header > .logo { /* Style */ width: 12.5rem; height: 12.5rem; background: grey; /* Flex */ display: flex; align-items: center; justify-content: center; } header > nav ul li { width: 24%; display: inline-block; } header > nav ul li a { width: 100%; padding: 1rem 0; background: #fff; margin-top: 2.5rem; text-align: center; display: inline-block; } header > nav ul li a:hover { color: #fff; background: #000; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>CSS Grid In Production</title> </head> <body> <div id="container"> <header> <a href="#" class="logo">Logo</a> <nav> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </nav> </header> </div> </body> </html>
I tried to use the solutions other people provided to those who had the same question, but none of them seem to work for me. 我尝试使用其他人为有相同问题的人提供的解决方案，但似乎没有一个对我有用。 I might be able to pull it off by using hacks, but I really don't want to do that. 我也许可以通过使用hack来实现，但是我真的不想这么做。 I feel like this is so simple, but I don't know how to fix it. 我觉得这很简单，但我不知道如何解决。 So my question is: what would be the best way to recreate this simple header? 所以我的问题是： 重新创建此简单标头的最佳方法是什么？ How do I get the four navigation items to span the entire width of the container? 如何获得四个导航项目以跨越容器的整个宽度？
Apologies in advance if my question is too vague, I'm new to all of this. 如果我的问题太含糊，请您提前道歉，这是我的新手。
2 个解决方案
解决方案1
1 2018-03-02 13:27:24
If the problem is how to make the items span the entire width of their container, flex can help you by adding this: 如果问题在于如何使这些项目跨越其容器的整个宽度，则flex可以通过添加以下内容来帮助您：
ul {
display: flex;
justify-content: space-between;
}
解决方案2
1 已采纳 2018-03-02 13:27:41
Uee flexbox on the ul ul上的Uee Flexbox
/* Reset */ a { color: #000; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } body { margin: 0; font: 1.6rem Arial; } html { font-size: 62.5%; } *, *:before, *:after { box-sizing: border-box; } /* Container */ #container { margin: auto; padding: 0 3rem; max-width: 96rem; } /* Header */ header { width: 100%; padding: 2.5rem; background: lightgrey; } header>.logo { /* Style */ width: 12.5rem; height: 12.5rem; background: grey; /* Flex */ display: flex; align-items: center; justify-content: center; } header>nav ul { display: flex; justify-content: space-between; } header>nav ul li { flex: 1; margin: 0 .25em } header>nav ul li:first-child { margin-left: 0; } header>nav ul li:last-child { margin-right: 0 } header>nav ul li a { width: 100%; padding: 1rem 0; background: #fff; margin-top: 2.5rem; text-align: center; display: inline-block; } header>nav ul li a:hover { color: #fff; background: #000; }
<div id="container"> <header> <a href="#" class="logo">Logo</a> <nav> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul> </nav> </header> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.