div 不是内联的无序列表项

Question

我不知道如何让这个列表包含内嵌的项目。同样出现的问题是带有 class 卡片的 div 需要是块，但它们会换行。

这是我的 HTML:

<ul class="cards">
  <li>
    <div class="card">
      <img src="/static/images/card-1.jpg">
      <div class="container">
        <h4><b>Connect with your elevator easily</b></h4>
        <p>Shop from your trusted elevator just with few simple clicks at any point in time of your day!</p>
      </div>
    </div>
  </li>
  <li>
    <div class="card">
      <img src="/static/images/card-1.jpg">
      <div class="container">
        <h4><b>Connect with your elevator easily</b></h4>
        <p>Shop from your trusted elevator just with few simple clicks at any point in time of your day!</p>
      </div>
    </div>
  </li>
  <li>
    <div class="card">
      <img src="/static/images/card-1.jpg">
      <div class="container">
        <h4><b>Connect with your elevator easily</b></h4>
        <p>Shop from your trusted elevator just with few simple clicks at any point in time of your day!</p>
      </div>
    </div>
  </li>
</ul>

这是我的 CSS:

.cards ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.cards li{
    display: inline;
}

.card {
    display: block;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 40%;
    border-radius: 5px;
}

.card img {
    width: 100%;
    border-radius: 5px 5px 5px 5px;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
    padding: 1px 8px;
}

如果我使用此代码，卡片将换行，但我需要它们在同一水平线上

Answer 1

显示：弹性；将允许您将块或内联元素放在一行中，还可以让您根据 flex-directions 轴以多种不同方式对齐这些元素。

在此处阅读有关 flex 的更多信息：Flexbox ~ MDN

.cards {
  display: flex;
  justify-content: center;
  gap: .5rem;
}

.cards ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
  list-style: none;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 1rem;
}

.card img {    
    width: 60%;
    border-radius: 5px 5px 5px 5px;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

h4 {
  font-family: sans-serif;
}

.container {
  text-align: left;
}

<ul class="cards">
  <li>
    <div class="card">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgtGOC5VrftlEBp2w-Hw1JiauZTk4jBe4JLg&usqp=CAU">
      <div class="container">
        <h4><strong>Connect with your elevator easily</strong></h4>
        <p>Shop from your trusted elevator just with few simple clicks at any point in time of your day!</p>
      </div>
    </div>
  </li>
  <li>
    <div class="card">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgtGOC5VrftlEBp2w-Hw1JiauZTk4jBe4JLg&usqp=CAU">
      <div class="container">
        <h4><strong>Connect with your elevator easily</strong></h4>
        <p>Shop from your trusted elevator just with few simple clicks at any point in time of your day!</p>
      </div>
    </div>
  </li>
  <li>
    <div class="card">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgtGOC5VrftlEBp2w-Hw1JiauZTk4jBe4JLg&usqp=CAU">
      <div class="container">
        <h4><strong>Connect with your elevator easily</strong></h4>
        <p>Shop from your trusted elevator just with few simple clicks at any point in time of your day!</p>
      </div>
    </div>
  </li>
</ul>

div 不是内联的无序列表项

unordered list items with divs not inline

html

css

html-lists

display