html - 为什么我的 html 没有排队(相同的代码，不同的结果)

Question

首先，这不是重新发布它的不同问题，相同的代码。

所以最后一个问题我得到了 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))。

Answer 1

列表中的第二项 ( <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 之外。