0

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

所以最后一个问题我得到了h1和h1:small排队，我在不止一个地方使用该代码并且它中断了，（他们不排队）。我做错了吗？（使用 Twitter 引导）

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 我正在使用引导程序（通过 Twitter））。

4

1 回答 1

0

将列表 ( <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 之外。

于 2013-01-27T03:44:20.647 回答