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

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

使用inline-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;
}

简单的CSS：如何修复显示：内联问题

1 个答案: