Question

我想让我的网页标题在屏幕中居中。名为“打哈欠雪人”的标题应位于中心位置，导航药应位于右侧。虽然我能够将导航药片放到右边，但它们似乎在“打呵欠雪人”下面一行。

我尝试了给出here的建议，但这并没有以任何可见的方式影响html。这是我的CSS：

.page-header{
    width: 70%;
    margin: 0 auto;
    float: none; 
}

.page-header > h1 {
    display: inline-block;
}

这是我的HTML：

<html>
<body>
    <div class="page-header">
        <div class="text-center">
            <h1>Yawning Yeti</h1>
        </div>

        <div class="center-pills">
            <ul class="nav nav-pills pull-right">
                <li class="active">
                    <a href="#">bigfoot <span class="badge">+42</span></a>
                </li>
                <li>
                    <a href="#">nessie <span class="badge">3</span></a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

我怎样才能让导航丸在同一条线上的'Yawning Yeti'右侧，占据中心70％的屏幕？

Answer 1

基本上，当您拥有pull-left或pull-right个组件时，它们应该出现在其他“非拉”组件之前。

在您的情况下，您需要将<ul class="nav nav-pills pull-right">放在<div class="text-center">之前，如下所示：http://jsbin.com/cazokija/31

如何让页眉和导航丸出现在同一行

1 个答案: