gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 03:52:56 24 4
gpt4 key购买 nike

我想让我的网页标题在屏幕上居中。名为“打哈欠的雪人”的标题应该位于中心,导航丸应该在它的右边。尽管我能够将导航丸调到右侧,但它们似乎在“打哈欠的雪人”下方一行。

您可以在此处查看页面:http://jsbin.com/cazokija/1/

我尝试了给出的建议 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>

如何才能让导航栏位于“打呵欠雪人”的右侧,在同一条线上,并占据屏幕中心 70% 的空间?

最佳答案

基本上当你有 pull-leftpull-right组件,它们应该出现在其他“非拉”组件之前。

在您的情况下,您需要输入 <ul class="nav nav-pills pull-right">之前 <div class="text-center">像这样:http://jsbin.com/cazokija/31

关于html - 如何让页眉和导航丸出现在同一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23178100/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com