Question

我有一个导航栏，它由按钮/复选框组成，使其响应，我要么想要使用浏览器的整个宽度，这必须是响应的（因此随着浏览器变小而缩小）或者只是为了集中。 HTML：

    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Index_files/style.css">
<label for="show-menu" class="show-menu">Expand Menu</label>
<input type="checkbox" id="show-menu" role="button" width="100%">
<ul id="menu">
    <li><a href="index.html"><img src="Index_files/Images/Coldplay Logo Transparent.png" style="height:100%;"></a>          </li>

    <li>
        <a>Music ￬</a>
        <ul class="hidden">
            <li><a href="Index_files/Webpages/musicTracks.html">Music Tracks</a></li>
            <li><a href="Index_files/Webpages/musicVideos.html">Music Videos</a></li>
        </ul>
    </li>

    <li><a href="Index_files/Webpages/Tour.html">Tour</a></li>
    <li><a href="Index_files/Webpages/Gallery.html">Gallery</a></li>
    <li><a href="Index_files/Webpages/Feed.html">Feed</a></li>

    <li><a>Store ￬</a>
        <ul class="hidden">
            <li><a href="Index_files/Webpages/storeTickets.html">Tickets</a></li>
            <li><a href="Index_files/Webpages/storeMerch.html">Merchandise</a></li>
        </ul>
    </li>

    <li><a href="Index_files/Webpages/Contact.html">Contact</a></li>

</ul>

CSS：

/*ul of padding and list styling*/
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
    display:table;
    margin: 0 auto;
}

/*Create horizontal list with spacing*/
li {
    display:inline-block;
    float:left;
    margin-right: 1px;

}

/*Style for menu links*/
li a {
    display:block;
    align-content:center;
    align-items:center;
    min-width:140px ;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background: #303133;
    text-decoration: none;


}

Answer 1

在css中：＃菜单{ 宽度：100％; }

响应式导航栏100％宽度

1 个答案: