时间戳

首页 > 解决方案 > 如何使用嵌套列表横向列出元素？

html - 如何使用嵌套列表横向列出元素？

问题描述

我正在努力提高自己在 Web 开发方面的水平。我一直在尝试设计网络产品登陆页面，但我被困在定价部分。我已经尝试过在互联网上找到的解决方案（如 w3schools 等），但不知道该怎么做。所以这里有一个问题：

我有一个这样的 div，“productsli”类的每个成员都是我的产品，试图为我的访客设计一张卡片。我想水平显示它们，但我做不到。这是我给他们的css代码：

#products{
  grid-area:3/2/4/3;
  display:grid;
  margin-top:200px;
  
}
#products ul{
  list-style-type:none;
    float:left;
}
#products li{
  list-style-type:none;

}
  <div id="products">
    <ul>
      <li  class="prodcustli">
        <ul>
          <li><h3>Razer kulaklık</h3></li>
          <li><p>lorem ipsum dolor</p></li>
        </ul>  
      </li>
        <li  class="prodcustli">
        <ul>
          <li><h3>Razer kulaklık</h3></li>
          <li><p>lorem ipsum dolor</p></li>
        </ul>  
      </li>
        <li  class="prodcustli">
        <ul>
          <li><h3>Razer kulaklık</h3></li>
          <li><p>lorem ipsum dolor</p></li>
        </ul>  
      </li>
    </ul>
    </div>

我应该怎么办？

标签： htmlcss

解决方案

您好，您的包含列表的 div 没有足够的宽度将子分区保持在同一行。所以你可以这样做：

#header{
  display:flex;
  width:100%;
  height:80px;
  background-color:#004dc9;
  justify-content:space-between;
  position:fixed;
  align-items:center;
  grid-area:header;
}
#header-img{
  height:100%;
}
.nav-link{
  float:left;
  font-size:42px;
  padding-right:35px;
  text-decoration:none;
  color:white;
}
body{
  display:grid;
  justify-items:center;
  background-color:#FFFDD0;
  grid-template-columns:33% 50% 33%;
  grid-template-rows: 33% 33% 33%;
  grid-template-areas:
    "header header header"
    "advert content content"
    "footer footer footer"
}
@media(max-width:300px){
  body{
    grid-template-areas:
    "header header header"
    "content content advert"
    "footer footer footer"
  }
}
#video{
  grid-area:2/2/3/3;
}
#form{
  grid-area:3/2/4/3;
  margin-top:150px;
}
#products{
  grid-area:3/2/4/3;
  display:grid;
  margin-top:200px;
  width: 100%;
  
}
#products ul{
  list-style-type:none;
    float:left;
}
#products li{
  list-style-type:none;

}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <header id="header">
    <img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/1280px-Free_logo.svg.png">
    <nav id="nav-bar">
      <a class="nav-link" href="#video">link1</a>
      <a class="nav-link" href="#video">link2</a>
      <a class="nav-link" href="#video">link3</a>
    </nav>
  </header>
  <iframe width="250" height="250" src="https://www.youtube.com/embed/LIvSF0fQPJc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe><br>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input type="email" id="email" name="email" placeholder="Enter Your E-Mail" required>
    <input type="submit" id="submit">
  </form>
  <div id="products">
    <ul>
      <li  class="prodcustli">
        <ul>
          <li><h3>Razer kulaklık</h3></li>
          <li><p>lorem ipsum dolor</p></li>
        </ul>  
      </li>
        <li  class="prodcustli">
        <ul>
          <li><h3>Razer kulaklık</h3></li>
          <li><p>lorem ipsum dolor</p></li>
        </ul>  
      </li>
        <li  class="prodcustli">
        <ul>
          <li><h3>Razer kulaklık</h3></li>
          <li><p>lorem ipsum dolor</p></li>
        </ul>  
      </li>
    </ul>
  </div>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>


</html>

您还必须在正文语句的末尾链接 Javascript

推荐阅读