Question

我一直在我的投资组合网站上工作，并且一直在尝试使用li标签来显示不同的项目。我注意到的一个问题是，每次我向li添加内容时，它都会下台并拒绝保持我想要的内联。在下面的示例中，我添加了“ pp”，第一个li下台了。从li中删除内容后，它会返回其原始行。任何帮助将不胜感激。

.works ul.project_ul {
      padding: 0;
      text-align: center;
      margin-top: 40px;
      margin-bottom: 50px;
    }
    
    .works ul.project_ul li {
      width: 25.3%;
      height: 230px;
      display: inline-block;
      list-style: none;
      margin: 1%;
      border-radius: 12px;
    }
    
    .works ul.project_ul li:nth-child(1) {
      border: 1px solid #202124;
    }
    
    .works ul.project_ul li:nth-child(2) {
      background-color: red;
    }
    
    .works ul.project_ul li:nth-child(3) {
      background-color: #08171f;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="works">
            <ul class="project_ul">
              <li>
                pp
              </li>
              <li>
              </li>
              <li>
              </li>
            </ul>
          </div>
</body>
</html>

Answer 1

只需为您的li选择器添加规则vertical-align: top;

.works ul.project_ul {
      padding: 0;
      text-align: center;
      margin-top: 40px;
      margin-bottom: 50px;
    }
    
    .works ul.project_ul li {
      width: 25.3%;
      height: 230px;
      display: inline-block;
      list-style: none;
      margin: 1%;
      border-radius: 12px;
      box-sizing: border-box;
      vertical-align: top;
    }
    
    .works ul.project_ul li:nth-child(1) {
      border: 1px solid #202124;
    }
    
    .works ul.project_ul li:nth-child(2) {
      background-color: red;
    }
    
    .works ul.project_ul li:nth-child(3) {
      background-color: #08171f;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="works">
            <ul class="project_ul">
              <li>
                pp
              </li>
              <li>
              </li>
              <li>
              </li>
            </ul>
          </div>
</body>
</html>

添加内容后如何阻止li标签退出？

1 个答案: