html - 我怎样才能使这个菜单显示，就像使用媒体查询的图像一样？

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 设为 display:inline-block; 并将 text-align:center 添加到 ul

.menu-tags ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: list-item;  
    text-align: center;
}
.menu-tags li {
    display: inline-block;

}
.menu-tags a:link{
    text-decoration: none;
}
.menu-tags ul li a {
    display: inline-block;    
    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%;
}

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