0

これを開始するには、これは再投稿ではなく、別の質問、同じコードです。

それで、最後の質問と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私はブートストラップを使用しています（Twitterで））。

4

1 に答える 1

0

リストの 2 番目の項目 ( ) が 2 行目に配置されているのは、最も外側の div ( ) 内に両方のリスト項目を同じ行に表示する<ul class="inline">のに十分なスペースがないためです。<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 に答える