在导航栏的中心对齐元素,一个(或多个)元素除外
Align elements on center of the navigation bar, except one (or more) elements
我有这个application,写在RMarkdown
:
我尝试将 .navbar
元素居中,但右侧的图标除外。此代码运行良好:
.navbar-nav {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
但是图标在中间:
我只希望这个图标位于 "initial position"。我试图用这段代码强制这种持久性:
.fa-question-circle {
float: right !important;
}
但是什么也没发生。
编辑
当调整屏幕大小时,图标 .fa-question-circle
在我点击它时从汉堡包菜单中消失:
汉堡菜单代码:
@media (max-width: 950px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
display: block !important;
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display: block !important;
}
}
我几乎可以肯定这里需要进行调整:
.navbar-left,.navbar-right {
float: none !important;
}
我试过了,但没用:
.navbar-left,.navbar-right {
float: none !important;
display: block !important;
position: absolute !important;
}
Objective: "icon" 应该是汉堡菜单上的最后一个选项。像这样:
根据您发布的 link,
您需要将此添加到 CSS
.navbar-right {
left: auto;
right: 10px;
transform: none;
}
关于你的第二个问题
将此 CSS 添加到您的 ul
ul {
display: flex;
white-space: nowrap;
}
带有左对齐、右对齐和居中对齐元素的导航栏。
CSS for nav responsive and style
<style>
.topnav {
position: relative;
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav-centered a {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.topnav-right {
float: right;
}
</style>
HTML code for navigation
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
<a href="#center" class="active">Center Nav Element</a>
</div>
<!-- Left-aligned links (default) -->
<a href="#left1">Left 1</a>
<a href="#left2">Left 2</a>
<!-- Right-aligned links -->
<div class="topnav-right">
<a href="#right1">Right 1</a>
<a href="#right2">Right 2</a>
</div>
</div>
我有这个application,写在RMarkdown
:
我尝试将 .navbar
元素居中,但右侧的图标除外。此代码运行良好:
.navbar-nav {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
但是图标在中间:
我只希望这个图标位于 "initial position"。我试图用这段代码强制这种持久性:
.fa-question-circle {
float: right !important;
}
但是什么也没发生。
编辑
当调整屏幕大小时,图标 .fa-question-circle
在我点击它时从汉堡包菜单中消失:
汉堡菜单代码:
@media (max-width: 950px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
display: block !important;
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display: block !important;
}
}
我几乎可以肯定这里需要进行调整:
.navbar-left,.navbar-right {
float: none !important;
}
我试过了,但没用:
.navbar-left,.navbar-right {
float: none !important;
display: block !important;
position: absolute !important;
}
Objective: "icon" 应该是汉堡菜单上的最后一个选项。像这样:
根据您发布的 link, 您需要将此添加到 CSS
.navbar-right {
left: auto;
right: 10px;
transform: none;
}
关于你的第二个问题
将此 CSS 添加到您的 ul
ul {
display: flex;
white-space: nowrap;
}
带有左对齐、右对齐和居中对齐元素的导航栏。
CSS for nav responsive and style
<style>
.topnav {
position: relative;
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav-centered a {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.topnav-right {
float: right;
}
</style>
HTML code for navigation
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
<a href="#center" class="active">Center Nav Element</a>
</div>
<!-- Left-aligned links (default) -->
<a href="#left1">Left 1</a>
<a href="#left2">Left 2</a>
<!-- Right-aligned links -->
<div class="topnav-right">
<a href="#right1">Right 1</a>
<a href="#right2">Right 2</a>
</div>
</div>