Question

我有一个媒体查询，可以让我的导航栏按钮在小屏幕上垂直，但是当发生这种情况Customize the Jackson ObjectMapper时我不知道为什么，因为我的代码中没有左边距。提前感谢任何能够摆脱这种情况的人。

CSS：

/* Navbar */
#navbar {
    background-color: #599;
    list-style-type: none;
    overflow: hidden;
    margin: 0px;
    width: auto;
    text-align: centre;
    font-family: 'corbel','arial';
    text-align: center; 
}

#nav_li {
    float: left;
    display: inline;
    text-align: center;
}

#nav_a {
    text-decoration: none;  
    margin: 10px;
    display: inline-block;
    color: white;
}



/* Media queries for smaller screens*/
@media screen and (max-width : 350px){

    /* reduce padding */
    header nav a{padding:.7em .7em; }
    [role=main]{padding:1.5em 1.5em;}

    /* make navbar vertical */
    #nav_li{text-align: center;
            border-bottom: 1px solid #eee;}
    #nav_li, #navbar_a{width: 100%;}

HTML：

<ul id='navbar'>
    <li id='nav_li'><a id='nav_a' href='index.html'>Home</a></li>
    <li id='nav_li'><a id='nav_a' href='gallery.html'>Gallery</a></li>
    <li id='nav_li'><a id='nav_a' href='testimonials.html'>Testimonials</a></li>
    <li id='nav_li'><a id='nav_a' href='contact.html'>Contact </a></li> 
</ul>

Answer 1

默认UL元素从左侧获取一些填充。您需要添加以下css来解决此问题：

#navbar {
    padding: 0px;
}

每个导航栏按钮左侧的CSS空白区域

1 个答案: