css - 简单的 CSS : How to fix display:inline issue

Question

有点不好意思问，但我对 CSS 还很陌生，我只是想在 HTML 列表项上添加一些简单的显示:内联样式。该列表由不同的标题、段落、图像和链接标签组成，我似乎无法将它们全部内嵌在一行中。

这是我代码的所有相关部分，希望有人能指出一个简单的修复方法。

HTML

<ul>
    <li>
      <h3>Quantity</h3>
    </li>

    <li>
      <p>#</p>
    </li>

    <li><img onclick="addQuantity('itemName')" src="images/plus.png"></li>

    <li>
      <h3>1</h3>
    </li>

    <li><img onclick="minusQuantity('itemName')" src="images/minus.png"></li>

    <li>
      <h2>Add To Cart</h2>
    </li>

    <li>
      <h4><a href="#checkout.html">Checkout</a></h4>
    </li>
  </ul>

CSS

ul {
  list-style-type:none;
}

li {
  display:inline;
}

Answer 1

简单的问题，简单的答案:)

使用内联 block

Have an example!

CSS

li {
  display:inline-block;
}

---

现在，作为 CSS，有许多方法可以实现您想要的布局。下面是一个使用 display: table 和 display: table-cell 的更深入的示例。相同的 HTML。

Have a second example!

CSS

* {
    margin: 0;
    padding: 0;
}
html,body {
    height: 100%;
}
ul {
  list-style-type:none;
    display: table;
    border-collapse: collapse;
    border-spacing: 10px;
    background: #333;
    width: 100%;
}

li {
  display:table-cell;
    background: #DDD;
    vertical-align: middle;
}