菜單項略微傾斜？

我正在建立一個菜單，最後一個項目'現在預訂'稍微傾斜（按下）。我所做的只是添加邊框，這似乎打破了完美的水平對齊。有沒有什麼辦法解決這一問題？菜單項略微傾斜？

HTML：

<div class="navibar"> 
    <a class="logo" href="#">Logo</a> 

    <ul class="left-bar"> 
     <li> 
     <a href="#">ACCOMMODATIONS</a> 
     </li> 
     <li> 
     <a href="#">DINING</a> 
     </li> 
     <li> 
     <a href="#">SPA & WELLNESS</a> 
     </li> 
      <li> 
     <a href="#">MEETINGS & EVENTS</a> 
     </li> 
     <li> 
     <a href="#">ADVENTURES</a> 
     </li> 
    </ul> 

    <ul class="right-bar"> 
     <li> 
     <a class="btn btn-ghost" href="#">BOOK NOW</a> 
     </li> 
    </ul> 
    <div style="clear:both"></div> 

    </div>

CSS：

* { 
     list-style: none; 
     margin: 0px; 
     padding: 0px; 
     text-decoration: none; 
    } 

    .navibar { 
     margin: 0 auto;; 
     width: 1100px; 
     background: rgba(18, 23, 26, 0.4); 
     padding: 20px; 
    } 

    .navibar li a { 
     color: white; 
     display: inline-block; 
     padding-top: 5px; 
     padding-bottom: 5px; 
     padding-left: 20px; 
     padding-right: 20px; 
    } 

    .logo { 
     float:left; 
     padding-top: 5px; 
     padding-bottom: 5px; 
     padding-left: 10px; 
     padding-right: 10px; 
     padding-right: 100px; 
    } 

    .navibar li { 
     float: left; 
    } 
    .left-bar { 
     float: left; 
    } 
    .right-bar { 
     float: right; 
    } 

    .btn:link, 
    /*Prevents color change when clicked */ 

    .btn:visited { 

     /*<a> is a inline element which doesn't allow padding, so need to change to inline-block */ 

     /* 10 on top and bottom and 30 left and right */ 
     font-weight: 300; 
     word-spacing: 3px; 
     font-family: brandon-grotesque; 
     text-decoration: none; 
     /*Takes away line on bottom of words */ 
     transition: background-color 0.2s, border 0.2s, color 0.2s; 
     /* makes color subtly change instead of instantly. More applealing */ 
    } 

    .btn-full:link, .btn-full:visited { 
     background-color: #fff; 
     /* From flat UI colors */ 
     border: 1px solid #fff; 
     color: #fff; 
     margin-right: 10px; 
    } 

    .btn-ghost:link, .btn-ghost:visited { 
     border: 2px solid #fff; 
     color: #fff; 
    }

我可能是錯的，但我敢肯定國界不添加填充或保證金。

填充文本，因爲堆棧溢出說我需要更多的文本。真的嗎？

來源

2017-09-26 thatemployee

您的codepen示例看起來OK ...我錯過了什麼？ – jhenderson2099

只需使用邊距負邊框寬度

.btn-ghost:link, .btn-ghost:visited { 
    border: 2px solid #fff; 
    margin-top: -2px; 
    color: #fff; 
}

他們一致邊境之前，但2px的邊框由2px的推動因素了。如果你喜歡，你可以向上移動項目或添加一個不可見的邊框或邊距到其他項目

來源

2017-09-26 21:47:04 Peter

不客氣，但請將問題標記爲已回答，如果這有幫助 – Peter

菜單項略微傾斜？

回答

相關問題