Question

我正在尝试学习CSS网格，但是我无法在div内响应地将行放置在行中。我的意思是1行多列。

这是当前的外观： current

HTML：

<div class="subMenu">

    <ul>
         <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>

         </ul>

    </div>

这是CSS：

.subMenu{
    display: flex;
    position:relative;
    left: 0;
    width: 100%;
    background: white;
    height: 0;
    overflow: hidden;
    border-top: 1px solid rgb(136, 153, 151);
    opacity: 0;
    z-index: 1;


}
.subMenu ul{
    display: grid;

    justify-content: space-around;
    grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));



}
.subMenu ul li{

    height: %100;
    display:block;
}
.subMenu ul li a {
    position: relative;
    display: block;
    height: 100%;
    text-decoration: none;
    text-align: center;

}
.subMenu ul li a figure{
    transform: translate(0px, -50px);
    height: 100px;


}
.subMenu ul li a figure img{
    border-radius: 50%;
    height: 100%;
}

我想我不明白如何确定网格单元的大小并在网格单元上放置项目。正如您在图片中看到的那样，它们没有在网格内定位和居中。

谢谢

Answer 1

您甚至不必使用CSS网格。 Flex可以自己处理。

只需将display flex放在<ul>上并尝试保持代码干净：

.subMenu ul{
    padding: 0;
    list-style: none;
    margin: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.subMenu ul li a {
    position: relative;
    display: block;
    text-decoration: none;
    text-align: center;

}

<div class="subMenu">

    <ul>
         <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>
                            <li>
                  <a href="/products/category/mens-wallets" >
                    <figure><img src="https://bellroy.imgix.net/cms_images/992/MensWallets.png?auto=format&amp;fit=max&amp;h=100"/></figure>
                    <span>Men's wallets</span>
                  </a>
                </li>

         </ul>

    </div>

在CSS网格1的订单项中，多列

1 个答案: