浮动和边底问题
16lz
2021-01-22
Im trying to figure out how to add a logo to my flexbox navigation. I want the logo to float on the left. Also attempting to use the border-bottom on the link hover state, but it seems to be pushing the height of the bar down as well as having the entire li with a border instead of just the text. any help pls!
我正在想办法给我的flexbox导航添加一个logo。我想让标识在左边浮动。也试图在链接悬停状态下使用边框底部,但它似乎将条的高度向下推,同时使整个li具有边框,而不仅仅是文本。任何帮助请!
#nav {
border-bottom: 5px solid #BF2B36;
}
.navigation {
list-style: none;
margin: 0;
background: #333333;
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: flex-end;
z-index: 2000;
font-family: 'BabasNeueBold';
font-size:24px;
letter-spacing:2px;
line-height:80px;
}
.logo {
background:red;
width:200px;
height:50px;
padding-top:10px;
float:left;
}
.navigation a, .navigation a:active, .navigation a:visited {
text-decoration: none;
display: block;
padding:0px 15px 0px 15px;
color: #FFF;
letter-spacing:2px;
}
.navigation a:hover {
color: #BF2B36;
border-bottom:2px solid #BF2B36;
}
@media all and (max-width: 800px) {
.navigation {
justify-content: space-around;
}
}
@media all and (max-width: 600px) {
.navigation {
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
padding: 0;
}
.navigation a {
text-align: center;
padding: 10px;
border-top: 1px solid rgba(255,255,255,0.3);
}
.navigation a:hover {
color: #BF2B36;
border-bottom:2px solid #BF2B36;
}
}
<div id="nav">
<ul class="navigation">
<li><div class="logo"></div></li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
更多相关文章
- 如果没有内容,隐藏边框
- phpstorm取消自动保存并标识修改的文件为星星标记
- (T_ENCAPSED_AND_WHITESPACE),期望标识符(T_STRING)或变量(T_VARI
- 如何在mysql中配置区分大小写的数据库标识符
- 当页面上有多个按钮时,按钮样式在页面加载上有厚的边框
- 获取html DOM元素内容的边框
- Python2基础用法(中文编码,标识符,注释)
- 如何在sql server中生成并手动插入一个惟一标识符?
- 当 IDENTITY_INSERT 设置为 OFF 时,不能为表 'tb_MyInvoices&