所以我有这个水平菜单,下面有一行,但我的文字一直很奇怪:
我尝试使用display:inline修复,但它会将我的行转换为每个单词下的切片。
我想要的是:对齐菜单(如第二张图片)和一条直线(图1)。
/* Navigation */
#undefined-sticky-wrapper {position:relative;height:0 !important;}
.menu {
position:absolute;
bottom:0;
width:100%;
height:76px;
background:#000000;
z-index:9999;
}
#logo {
float:left;
margin-bottom:0;
margin-left:0;
}
#nav {
text-align: center;
}
.navigation{
list-style: none;
margin: 0;
}
ul.navigation {
overflow-x:hidden;
position:relative;
text-align:center;
margin:0 auto;
padding:0;
width:770px;
}
.navigation li{
display:inline-block;
text-align:center;
width:128px;
padding:28px 0 12px;
margin:0 -2.5px;
text-transform:none;
background:none;
border-bottom:1px solid #393939;
font-family: 'Oswald', sans-serif;
font-weight:300;
font-size:15px;
line-height:20px;
color:#a3a3a3;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.navigation li:hover,
.navigation .active {
cursor:pointer;
color:#fff;
}

<div id="undefined-sticky-wrapper" class="sticky-wrapper is-sticky" style="height: 76px;"><div class="menu" style="position: fixed; height: 56px; margin-top: 0px; padding-bottom: 20px; top: 0px;">
<div class="container clearfix">
<div id="nav">
<a class="btn_dropdown" data-toggle="collapse" data-target=".nav-collapse_">MENU</a>
<ul class="navigation ph-line-nav">
<li data-slide="2" class="">FORMAÇÃO</li>
<li data-slide="4" class="">SKILLS</li>
<li data-slide="6" class="">EXPERIÊNCIA</li>
<li data-slide="8" class="">PREMIAÇÕES</li>
<li data-slide="10" class="">PORTIFÓLIO</li>
<li data-slide="12" class="">CONTATO</li>
<div class="effect"></div>
<div class="clear"></div>
</ul>
</div>
</div>
</div></div>
&#13;
答案 0 :(得分:0)
(Answered by the OP in a question edit. Converted to a community wiki answer.)
在shanidkv w / margin的帮助下,它帮助了我的菜单对齐!
关于底线,如果我发现它是边框,所以我只使用了
border-collapse:collapse
现在我觉得很蠢