gpt4 book ai didi

html - 如何将导航栏菜单放在 Logo 下方?

转载 作者:行者123 更新时间:2023-11-28 00:25:03 34 4
gpt4 key购买 nike

我使用自定义 CSS 和 Bootstrap 类名称构建了这个 header 。我已经尝试了 z-indexfloat: initial 属性。提前致谢

.branding-preview {
height: 75px;
margin-left: 15px;
margin-right: 15px;
background-color: #0071bb;
}

.branding-logo {
float: left;
height: 50px;
font-size: 18px;
padding: 15px 15px;
}

.branding-logo img {
width: 300px;
height: 50px;
}

.branding-powered-by-logo {
float: right;
height: 50px;
color: white;
font-size: 15px;
padding: 2px 10px;
}

.preview-menu {
margin: 30px 0 0 0;
}

.preview-menu > li > a {
margin: 0 3px;
color: white;
text-transform: uppercase;
border-bottom: solid 1px transparent;
background-color: transparent !important;
}
<div class="branding-preview">
<div class="branding-logo">
<img id="branding-logo" src="/path/to/logo">
</div>
<div class="branding-powered-by-logo">
<span>Powered By</span>
<img id="branding-powered-by-logo" src="/path/to/logo" height="30">
</div>
<ul class="navbar-nav navbar-right nav preview-menu">
<li><a>Start</a></li>
<li><a>Plan</a></li>
<li><a>Manage</a></li>
<li><a>Learn</a></li>
<li><a>Admin</a></li>
</ul>
</div>

这是我用当前代码得到的结果,实际结果:

enter image description here

这是我希望的样子,预期结果:

enter image description here

最佳答案

没有所有的 css 规则并不简单,但概念是:创建一个向右浮动的包装器并在内部创建 2 行,一行用于 branding-powered-by-logodisplay:block 第二行取决于实际的 CSS,但可能无需修改任何内容即可工作。

如果您可以发布真实页面,我们可以更精确地帮助您。希望对您有所帮助。

.branding-preview {
display:block;
height: 75px;
margin-left: 15px;
margin-right: 15px;
background-color: #0071bb;
}

.branding-logo {
float: left;
height: 50px;
font-size: 18px;
padding: 15px 15px;
}

.branding-logo img {
width: 300px;
height: 50px;
}

.branding-powered-by-logo {
/* ADDED */
display:block;
text-align:right;

height: 50px;
color: white;
font-size: 15px;
padding: 2px 10px;
}

.preview-menu {
margin: 0px 0 0 0;
}

.preview-menu > li > a {
margin: 0 3px;
color: white;
text-transform: uppercase;
border-bottom: solid 1px transparent;
background-color: transparent !important;
}


/* ADDED */
.wrapper-logo-navbar {
float: right;
}
.preview-menu > li {
display: inline-block;
}
<div class="branding-preview">
<div class="branding-logo">
<img id="branding-logo" src="/path/to/logo">
</div>

<div class="wrapper-logo-navbar">
<div class="branding-powered-by-logo">
<span>Powered By</span>
<img id="branding-powered-by-logo" src="https://cdn.pixabay.com/photo/2012/05/02/19/27/head-46086_960_720.png" height="30">
</div>
<ul class="navbar-nav navbar-right nav preview-menu">
<li><a>Start</a></li>
<li><a>Plan</a></li>
<li><a>Manage</a></li>
<!-- removed some elements for the rendering on StackOverflow -->
</ul>
</div>
</div>

关于html - 如何将导航栏菜单放在 Logo 下方?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54668600/

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