padding+怎么了？

Question

大家好，所有的人都在外面！

我有一个可怕的错误，当我试图重新设计一个响应的画布菜单。

当我试图获得作为水平导航的菜单时，我的元素看起来非常奇怪。

我想要做的是在上面和底部添加一些填充到LI元素，但它不起作用。我得到的垫子在LI元素的右边和左边。

我错过了什么？

HTML：

​

    /* - - -  RESPONSIVE MENU - - -  */
    @media all and (max-width: 768px) {
    	/* menu */
    .c-menu {
      position: fixed;
      z-index: 200;
      background-color: #67b5d1;
      -webkit-transition: -webkit-transform 0.3s;
              transition: transform 0.3s;
    }
    .c-menu--slide-left .c-menu__item {
      display: block;
      text-align: center;
      border-top: solid 1px #b5dbe9;
      border-bottom: solid 1px #3184a1;
    }
    .c-menu--slide-left .c-menu__item:first-child {
      border-top: none;
    }
    .c-menu--slide-left .c-menu__item:last-child {
      border-bottom: none;
    }
    
    .c-menu--slide-left .c-menu__link {
      display: block;
      padding: 12px 24px;
      color: #fff;
    }
    
    .c-menu--slide-left .c-menu__close{
      display: block;
      padding: 12px 24px;
      width: 100%;
    }
    
    .c-menu__items {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    /* menu-button - responsive */
    
    .nav-button {
      display: inline-block;
      margin: 4px;
      padding: 12px 24px;
      color: #67b5d1;
      background: none;
      font-size: 14px;
      border: solid 2px #67b5d1;
      box-shadow: none;
      border-radius: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      cursor: pointer;
    }
    
    .nav-button:focus {
      outline: none;
    }
    
    .nav-button:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }
    
    } /*CLOSE MEDIA-QUERY FOR RESPONSIVE MENU MAX WIDTH 768PX*/ 
    
    @media all and (min-width: 769px) {
    .nav-button{
    	display: none !important;
    }
    
    .c-menu {
      position: relative;
      z-index: 1;
      text-align: center;
      background-color: #005ca8;
      display: inline !important;
      overflow: hidden;
      clear: both;
    }
    
    .c-menu__close{
    	display: none !important;
    }
    
    .c-menu--slide-left .c-menu__item {
      display: inline;
      text-align: center;
      border-top: none;
      border-bottom: none;
      
    }
    .c-menu--slide-left .c-menu__item:first-child {
      border-top: none;
    }
    .c-menu--slide-left .c-menu__item:last-child {
      border-bottom: none;
    }
    
    .c-menu--slide-left .c-menu__link {
      display: inline;
      padding: 30px;
      color: #fff;
    }
    
    .c-menu--slide-left .c-menu__close{
      display: inline;
      width: 100%;
    }
    
    .c-menu__items {
      list-style: none;
      margin: 0;
      background: #005ca8;
    }

        <nav id="c-menu--slide-left" class="c-menu c-menu--slide-left">
      <button class="c-menu__close">&larr; Stäng Meny</button>
      <ul class="c-menu__items">
        <li class="c-menu__item"><a href="#" class="c-menu__link">Home</a></li>
        <li class="c-menu__item"><a href="#" class="c-menu__link">About</a></li>
        <li class="c-menu__item"><a href="#" class="c-menu__link">Services</a></li>
        <li class="c-menu__item"><a href="#" class="c-menu__link">Work</a></li>
        <li class="c-menu__item"><a href="#" class="c-menu__link">Contact</a></li>
      </ul>
    </nav><!-- /c-menu slide-left -->

​

Answer 1

使用display: inline-block实现li

 .c-menu--slide-left .c-menu__item {
      display: inline-block;
      text-align: center;
      border-top: solid 1px #b5dbe9;
      border-bottom: solid 1px #3184a1;
    }

演示