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（通过推特））。

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之外。

为什么我的html没有排队（相同的代码，不同的结果）

1 个答案: