不可能對齊的內聯塊菜單

Question

所以我有一個水平菜單，下面有線條，但是我的文字一直變得很奇怪：

我試圖用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> 

Answer 1

（ 由OP在問題編輯中回答。轉換為社區Wiki答案。 ）

在shanidkv w / margins的幫助下，它幫助我調整了菜單！

關於下划線，以防萬一我發現它是一個邊框，所以我只使用border-collapse:collapse

現在我覺得很蠢