Question

你好，所有的家伙都在那里！

当我尝试重新设计响应式非画布菜单时，我遇到了尴尬的错误。

当我试图将水晶导航作为魔力时，我的元素显得非常奇怪。

我想要做的是在LI元素的顶部和底部添加一些填充，但它不起作用。我得到的填充位于LI元素的左右两侧。

我错过了什么？

HTML：

＆＃13;

    /* - - -  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;
    }

＆＃13;

        <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 -->

＆＃13;

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;
    }

<强> DEMO

padding +有什么问题

1 个答案: