首先,这不是重新发布它的不同问题,相同的代码。
所以最后一个问题我得到了 h1
和 h1:small
排成一行,我在不止一个地方使用了那个代码并且它中断了,(他们没有排队)。我做错了吗?
(使用 Twitter-Bootstrap)
HTML代码:
作品:
<div class="span3">
<div class="packspace">
<div class="thumbnail">
<div class="well-small">
<div class="center">
<img src="img/Redstone.png" />
</div>
<h3 class="centerbg">RedStone</h3>
<div class="pull-right">
<ul class="inline">
<li><h1>8$ |</h1></li>
<li><h1><small> 512mb</small></h1></li>
</ul>
</div>
</div>
<div class="centerbtn">
<button class="btn btn-info">Info</button>
</div>
</div>
不起作用:
<div class="span3">
<div class="packspace">
<div class="thumbnail">
<div class="well-small">
<div class="center">
<img src="img/lazuli.png" />
</div>
<h3 class="centerbg">Lazuli</h3>
<div class="pull-right">
<ul class="inline">
<li><h1>15$ |</h1></li>
<li><h1><small> 1024mb</small></h1></li>
</ul>
</div>
</div>
<div class="centerbtn">
<button class="btn btn-info">Info</button>
</div>
</div>
</div>
</div>
CSS:
h1 small {
vertical-align:middle;
}
.packspace {
margin-top: 5px;
}
.center {
width: 50%;
margin: 0px auto;
}
(PS 我正在使用 bootstrap(通过 Twitter))。
最佳答案
列表中的第二项 ( <ul class="inline">
) 被放在第二行的原因是最外层的 div ( <div class="span3">
) 中没有足够的空间在同一行显示两个列表项。
如果您希望列表中的两个元素始终在同一行,您可以尝试以下操作
html - 我用一个 h1 替换了列表
<div class="span3">
<div class="packspace">
<div class="thumbnail">
<div class="well-small">
<div class="center">
<img src="img/lazuli.png" />
</div>
<h3 class="centerbg">Lazuli</h3>
<div class="pull-right">
<h1 class="inline">8$ |<small> 1024mb</small></h1>
</div>
</div>
<div class="centerbtn">
<button class="btn btn-info">Info</button>
</div>
</div>
</div>
</div>
css - 除了你已经拥有的 css 之外
h1.inline {
white-space:nowrap;
}
这种方法的问题是,如果文本太长,它会排到最外层的 div 之外。
关于html - 为什么我的 html 没有排队(相同的代码,不同的结果),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14543934/