Question

如何使用媒体查询

显示此菜单，就像在图像中一样

这就是我现在所做的codepen link

<div class="container">
  <div class="row">
            <div class="col-md-12">
                <div class="menu-tags">
                  <ul>
                    <li><a href="#">ALL</a></li>
                    <li><a href="#">STARTER</a></li>
                    <li><a href="#">BREAKFAST</a></li>
                    <li><a href="#">LUNCH</a></li>
                    <li><a href="#">DINNER</a></li>
                    <li><a href="#">DESERTS</a></li>
                  </ul>
                </div>
         </div>
  </div>
</div>

Answer 1

将li设为cordova并将display:inline-block;添加到text-align:center

ul

演示：http://codepen.io/anon/pen/BjGBLE

Answer 2

全屏查看代码段

设置<li>元素的宽度，并移除上一个<li>的浮动。

.menu-tags li {
        float: left;
        width: 20%;  
        text-align: center;
 }
 .menu-tags ul > li:last-child {
        float: none;
        margin: auto;
  }

请尝试以下代码：

＆＃13;

.menu-tags ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: list-item;  
}
.menu-tags li {
    float: left;
    width: 20%;
    text-align: center;
    
}
.menu-tags ul > li:last-child {
    float: none;
    margin: auto;
}

.menu-tags a:link{
    text-decoration: none;
}
.menu-tags ul li a {
    display: inline-block;    
    text-align: center;
    padding: 14px 16px;
    text-decoration: none; color: black;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;   
    border-bottom: 3px solid transparent;
    font-family: "Josefin sans",sans-serif;
    text-transform: uppercase;
    margin: 0px 20px;
    padding-bottom: 2px;
    padding-top: 5px;
}
.menu-tags ul li a:hover{
    border-bottom: 3px solid #F1CD8F !important;
    text-decoration: none;
}
.menu-tags{
    padding-left: 10%;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="menu-tags">
        <ul>
          <li><a href="#">ALL</a></li>
          <li><a href="#">STARTER</a></li>
          <li><a href="#">BREAKFAST</a></li>
          <li><a href="#">LUNCH</a></li>
          <li><a href="#">DINNER</a></li>
          <li><a href="#">DESERTS</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

正确的CSS

.menu-tags ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: list-item;  
    }
    .menu-tags li {
       display: inline-block;
    }
    .menu-tags a:link{
        text-decoration: none;
    }
    .menu-tags ul li a {
        display: inline-block;    
        text-align: center;
        padding: 14px 16px;
        text-decoration: none; color: black;
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;   
        border-bottom: 3px solid transparent;
        font-family: "Josefin sans",sans-serif;
        text-transform: uppercase;
        margin: 0px 5px;
        padding-bottom: 2px;
        padding-top: 5px;
    }
    .menu-tags ul li a:hover{
        border-bottom: 3px solid #F1CD8F !important;
        text-decoration: none;
    }
    .menu-tags{
        padding-left: 10%;
        text-align: center;
    }

如何使用媒体查询进行此菜单显示？

3 个答案: