Question

我正在重新学习YouTube上的自适应网格CSS。跟着讲师的课。我在格式化中殿网格时遇到问题。我已经包括了html和CSS代码，以及他与我的导航结果的图片。任何帮助将不胜感激。

我试图将导航栏显示在4列网格中。我正在尝试看看我在这里缺少什么。

教师成绩：

Instructor Results

我的结果：

My Results

/* CSS Variables */

 :root {
  --primary: #ddd;
  --dark: #333;
  --light: #fff;
  --shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}

html {
  box-sizing: border-box;
  font-family: Arial, Helvetica, san-serif;
  color: var(--dark);
}

body {
  background: #ccc;
  margin: 30px 50px;
  line-height: 1.4;
}

.btn {
  background: var(--dark);
  color: var(--light);
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  border: 0;
}

img {
  max-width: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 20px;
}


/* Navigation */

.main-nav ul {
  display: grid;
  grid-gap: 20px;
  padding: 0px;
  list-style: none;
  grid-template-columns: repeat(4, 1fr);
}

<div class="wrapper">

  <!-- Navigation -->

  <nav class="main-nav">

    <ul>
      <li><a href="#">Home</li>
    				<li><a href="#">About</li>
    				<li><a href="#">Services</li>
    				<li><a href="#">Contact</li>
    			</ul>
    		</nav>
    
    		<!-- Top Container -->
    
    		<section class="top-container">
    
    			<header class="showcase">
    				<h1>Damn That Looks Delicious</h1>
    				<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam sem et tortor consequat id porta. 
    				</p>
    
    				<a href="#" class="btn">Read More</a>



        </header>

        <div class="top-box top-box-a">
          <h4>Membership</h4>
          <p class="price">$199/mo</p>
          <a href="" class="btn">Buy Now </a>

        </div>

        <div class="top-box top-box-b">
          <h4>Pro Membership</h4>
          <p class="price">$299/mo</p>
          <a href="" class="btn">Buy Now </a>

        </div>

        </section>


        <!-- Boxes Section -->

        <section class="boxes">
          <div class="box">
            <i class="fas fa-pizza-slice fa-4x"></i>
            <h3>Restaurants</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          </div>

          <div class="box">
            <i class="fas fa-utensils fa-4x"></i>
            <h3>Chefs</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          </div>

          <div class="box">
            <i class="fas fa-hamburger fa-4x"></i>
            <h3>Catering</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          </div>

          <div class="box">
            <i class="fas fa-ice-cream fa-4x"></i>
            <h3>Sweets</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          </div>

        </section>

        <section>

          <img src="images/dtld.jpg" alt="">

          <div>
            <h2> Your Business On DTLD</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            <a href="#" class="btn">Learn More</a>

          </div>

        </section>

        <!-- Portfolio Section -->

        <section class="portfolio">

          <img src="https:/source.unsplash.com/random/200x200" alt="">
          <img src="https:/source.unsplash.com/random/201x200" alt="">
          <img src="https:/source.unsplash.com/random/202x200" alt="">
          <img src="https:/source.unsplash.com/random/203x200" alt="">
          <img src="https:/source.unsplash.com/random/204x200" alt="">
          <img src="https:/source.unsplash.com/random/205x200" alt="">
          <img src="https:/source.unsplash.com/random/206x200" alt="">
          <img src="https:/source.unsplash.com/random/207x200" alt="">
          <img src="https:/source.unsplash.com/random/208x200" alt="">

        </section>

        <!-- Footer -->

        <footer>
          <p> Damn That Looks Delicious &copy; 2005</p>
        </footer>


</div>

<!-- Wrapper Ends -->

Answer 1

将结束标记添加到锚元素后，布局将按预期工作。

这就是您现在拥有的：

.main-nav ul {
  display: grid;
  grid-gap: 20px;
  padding: 0px;
  list-style: none;
  grid-template-columns: repeat(4, 1fr);
}

<nav class="main-nav">
  <ul>
    <li><a href="#">Home</li>
    <li><a href="#">About</li>
    <li><a href="#">Services</li>
    <li><a href="#">Contact</li>
   </ul>
</nav>

由于锚元素保持打开状态（creating invalid HTML code），因此浏览器会生成四个其他网格项。现在，网格容器具有八个子级：4 li和4 a。

由于代码每行只允许包含四个项目，因此将创建第二行以容纳其他四个项目。实际上，您总是有一个四列网格。

关闭锚标记（创建有效的HTML代码）后，仅呈现四个网格项。

.main-nav ul {
  display: grid;
  grid-gap: 20px;
  padding: 0px;
  list-style: none;
  grid-template-columns: repeat(4, 1fr);
}

<nav class="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
   </ul>
</nav>

此外，您可能希望查看my answer here，以获取有关nav元素内无序列表的简要分析和建议。

Answer 2

您的代码中缺少闭合锚</a>标签，因此一旦在其中添加了闭合锚标签。您的代码将完美运行。 screenshot of missing anchor tag

为什么我的CSS网格列不能在导航上工作？

2 个答案: