我有这个导航栏,我想要右边的两个单独的链接。但它似乎在浮动:对;到我的div 不起作用。相反,它与其他元素对齐。我们如何做到这一点?
/*css*/
#navigation {
background-color: rgba(0,0,0,0.5);
overflow: hidden;
color: white;
position: absolute;
bottom: 0;
width: 100%;
height: 46px;
border-top: 1px solid #6a6a6a;
.navigation-links-left {
width: max-content;
padding: 15px 0px;
border-left: 1px solid #6a6a6a;
margin: 0px;
a {
padding: 15px 16px;
border-right: 1px solid #6A6A6A;
margin: -3px;
}
}
.navigation-links-right {
float: right;
}
}
<!-- HTML-->
<div id="navigation">
<div class="wrapper">
<div class="navigation-links-left">
<a><img src="images/icon/icon_nav_03.png"></a>
<a>KU 스타트업 <img src="images/icon/icon_nav_04.png"></a>
<a>인사말</a>
<div class="navigation-links-right">
<a><img src="images/icon/icon_nav_01.png"></a>
<a><img src="images/icon/icon_nav_02.png"></a>
</div>
</div>
</div>
</div>
您需要应用您的div float left
,float right
下面的演示,我还更正了您将其包装navigation-links-right
在 navigation-links-left
div 中的代码中的一些 html,因此更正了
/*css*/
#navigation {
background-color: rgba(0,0,0,0.5);
overflow: hidden;
color: white;
position: absolute;
bottom: 0;
width: 100%;
height: 46px;
border-top: 1px solid #6a6a6a;
}
.navigation-links-left {
width: max-content;
padding: 15px 0px;
border-left: 1px solid #6a6a6a;
margin: 0px;
float:left;
}
a {
padding: 15px 16px;
border-right: 1px solid #6A6A6A;
margin: -3px;
}
.navigation-links-right {
float: right;
padding: 15px 0px;
}
<div id="navigation">
<div class="wrapper">
<div class="navigation-links-left">
<a><img src="images/icon/icon_nav_03.png"></a>
<a>KU 스타트업 <img src="images/icon/icon_nav_04.png">
</a>
<a>인사말</a>
</div>
<div class="navigation-links-right">
<a><img src="images/icon/icon_nav_01.png"></a>
<a><img src="images/icon/icon_nav_02.png"></a>
</div>
</div>
</div>
看起来您的navigation-links-right
元素嵌套在您的navigation-links-left
元素中。试着把它带到外面:
#navigation {
background-color: rgba(0,0,0,0.5);
overflow: hidden;
color: white;
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 46px;
border-top: 1px solid #6a6a6a;
}
.navigation-links-left, .navigation-links-right {
width: max-content;
padding: 15px 0px;
display: inline-block;
border-left: 1px solid #6a6a6a;
margin: 0px;
}
.navigation-links-left a, .navigation-links-right a {
padding: 15px 16px;
border-right: 1px solid #6A6A6A;
margin: -3px;
}
.navigation-links-right {
float: right;
}
<div id="navigation">
<div class="wrapper">
<div class="navigation-links-left">
<a><img src="images/icon/icon_nav_03.png"></a>
<a>KU 스타트업 <img src="images/icon/icon_nav_04.png"></a>
<a>인사말</a>
</div>
<div class="navigation-links-right">
<a><img src="images/icon/icon_nav_01.png"></a>
<a><img src="images/icon/icon_nav_02.png"></a>
</div>
</div>
</div>
我也相信这是CSS Flexbox的一个很好的应用程序:
#navigation {
background-color: rgba(0,0,0,0.5);
border-top: 1px solid #6a6a6a;
bottom: 0;
color: white;
height: 46px;
overflow: hidden;
position: absolute;
width: 100%;
}
.wrapper {
display: flex;
height: 100%;
justify-content: space-between;
}
.navigation-links-left, .navigation-links-right {
align-items: center;
border-left: 1px solid #6a6a6a;
display: inline-flex;
height: 100%;
justify-content: center;
margin: 0;
padding: 0;
}
.navigation-links-left a, .navigation-links-right a {
border-right: 1px solid #6A6A6A;
margin: -3px;
padding: 15px 16px;
}
<div id="navigation">
<div class="wrapper">
<div class="navigation-links-left">
<a><img src="images/icon/icon_nav_03.png"></a>
<a>KU 스타트업 <img src="images/icon/icon_nav_04.png"></a>
<a>인사말</a>
</div>
<div class="navigation-links-right">
<a><img src="images/icon/icon_nav_01.png"></a>
<a><img src="images/icon/icon_nav_02.png"></a>
</div>
</div>
</div>