Question

如何将列表项放在列表类的中央（它被定义为网格）。我试过使用margins，justify-items：center和在每个css类上添加/删除margins无效。

Gridbyexample是我一直在使用的教程网站，但是在遇到这种特殊情况时它并不是很有帮助。关于如何使用CSS Grid方法进行此操作的任何想法？我正在尝试仅使用这种方法，因为它是正在实施的新标准。最终，我试图建立一个对JavaScript的依赖程度最低的网站。

INDEX.HTML：

<html lang="en">
<div class="grid">
    <head class="main-head">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <title>Fast Websites</title>
    </head>

    <nav class="main-nav">
        <ul>
            <li><a href="">Nav 1</a></li>
            <li><a href="">Nav 2</a></li>
            <li><a href="">Nav 3</a></li>
        </ul>
    </nav>

    <body>
        <article class="post">
        <h1>Built solely on HTML and CSS</h1>  
        <p>Welcome to my blog. This is my attempt to create a blog type platform that relies </p>

        <h1>Second Paragraph</h1>  
        <p>Welcome to my blog. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Necessitatibus autem obcaecati sit quasi 
        asperiores eaque laborum dolore, harum maxime dolores sint 
        architecto quis earum corrupti ipsam eveniet placeat facilis 
        natus.</p> 
        <p>Welcome to my blog. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Necessitatibus autem obcaecati sit quasi 
        asperiores eaque laborum dolore, harum maxime dolores sint 
        architecto quis earum corrupti ipsam eveniet placeat facilis 
        natus.</p> 
        <p>Welcome to my blog. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Necessitatibus autem obcaecati sit quasi 
        asperiores eaque laborum dolore, harum maxime dolores sint 
        architecto quis earum corrupti ipsam eveniet placeat facilis 
        natus.</p> 
        </article>

        <ul class="listing">
            <li>
              <h2>Item One</h2>
              <div class="body"><p>The content of this listing item goes here.</p></div>
              <div class="cta"><a href="">Call to action!</a></div>
            </li>
             <li>
               <h2>Item Two</h2>
               <div class="body"><p>The content of this listing item goes here.</p></div>
               <div class="cta"><a href="">Call to action!</a></div>
             </li>
             <li class="wide">
               <h2>Item Three</h2>
               <div class="body"><p>The content of this listing item goes here.</p> 
               <p>This one has more text than the other items.</p>
               <p>Quite a lot more</p>
               <p>Perhaps we could do something different with it?</p></div>
               <div class="cta"><a href="">Call to action!</a></div>
              </li>
              <li>
               <h2>Item Four</h2>
               <div class="body"><p>The content of this listing item goes here.</p></div>
               <div class="cta"><a href="">Call to action!</a></div>
              </li>
               <li>
               <h2>Item Five</h2>
               <div class="body"><p>The content of this listing item goes here.</p></div>
                <div class="cta"><a href="">Call to action!</a></div>
              </li>
          </ul>


    <div class="ad">Advertising</div>
    <footer class="main-footer">The footer</footer>
</div>
</body>
</html>

**STYLES.CSS**


*{box-sizing: border-box;}

.main-head {grid-area: header;}
.post {grid-area: post;}
.listing {grid-area: listing;}
.main-nav {grid-area: nav;}
.ad {grid-area: ad;}
.main-footer {grid-area: footer;}

.grid {
    display: grid;
    grid-gap: 2em;
    grid-template-areas: 
    "header"
    "nav"
    "post"
    "listing"
    "ad"
    "footer";
    grid-template-rows: 200px;
    grid-auto-rows: auto;
    background-color: lightseagreen;
}

.post {
    background-color: lightpink;
    text-align: center;
}

.listing {
    background-color: red;
    display: grid;
    list-style: none;
    margin: 2em;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
  }

  .listing li {
    background-color: lightgrey;
    border: 1px solid #ffe066;
    border-radius: 5px;
    display: flex;
    flex-direction: column;

  }
  .listing .cta {
    margin-top: auto;
    border-top: 1px solid #ffe066;
    padding: 10px;
    text-align: center;
  }
  .listing .body {
    padding: 10px;
  }

code{background-color: lightgray;}

@media (min-width: 550px) {
    .grid {
      grid-template-columns: 1fr 3fr;
      grid-template-areas: 
        "header     header"
        "nav        nav"
        "post       post"
        "listing    listing"
        "ad         ad"
        "footer     footer";
    }
    nav ul {
      display: flex;
      justify-content: space-between;
    }
  }

  @media (min-width: 700px) {
    .grid {
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-areas: 
        "header     header      header"
        "nav        nav         nav"
        "ad         ad          ad"
        "post       post        post"
        "listing    listing     listing"
        "footer     footer      footer";
     }
     nav ul {
       flex-direction: column;
     }
  }

Answer 1

您可以将列表放入<div></div>中，然后使用： align-items:center。这应该允许您按要求进行。希望这会有所帮助吗？

如何在CSS网格中居中放置列表项（新方法）

1 个答案: