不可能对齐的内联块菜单

时间:2015-01-31 05:26:54

标签: html css

所以我有这个水平菜单,下面有一行,但我的文字一直很奇怪: enter image description here

我尝试使用display:inline修复,但它会将我的行转换为每个单词下的切片。 enter image description here

我想要的是:对齐菜单(如第二张图片)和一条直线(图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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

Answered by the OP in a question edit. Converted to a community wiki answer.

  

在shanidkv w / margin的帮助下,它帮助了我的菜单对齐!

     

关于底线,如果我发现它是边框,所以我只使用了border-collapse:collapse

     

现在我觉得很蠢