有点不好意思问,但我对 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;
}
最佳答案
简单的问题,简单的答案:)
使用内联 block
CSS
li {
display:inline-block;
}
现在,作为 CSS,有许多方法可以实现您想要的布局。下面是一个使用 display: table
和 display: table-cell
的更深入的示例。相同的 HTML。
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 - 简单的 CSS : How to fix display:inline issue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25344718/