Question

我对HTML很新，我试图为学校作业重新创建这个线框示例： Wireframe

这是我写的代码，以便得到我的目标：

＆＃13;

/* 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;
}

＆＃13;

<!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>

＆＃13;

我尝试使用其他人提供给那些有同样问题的人的解决方案，但这些解决方案似乎都不适合我。我也许可以通过使用黑客来解决它，但我真的不想这样做。我觉得这很简单，但我不知道如何解决它。所以我的问题是：重新创建这个简单标题的最佳方法是什么？如何让四个导航项跨越容器的整个宽度？

如果我的问题太模糊，请提前道歉，我对这一切都不熟悉。

Answer 1

如果问题是如何使项目跨越其容器的整个宽度，flex可以通过添加以下内容来帮助您：

ul {
  display: flex;
  justify-content: space-between;
}

Answer 2

ul

上的Uee flexbox

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

容器内的全宽导航

2 个答案: