拉伸CSS导航条横跨整个页面 - Stretch CSS nav bar across whole page

Stretch CSS nav bar across whole page

本文关键字：CSS 导航拉伸 | 更新日期: 2023-09-27

这是我的网站https://nhallowe.w3.uvm.edu/cs008/assignment5.0/

我想让导航条延伸到整个页面，现在它在接近边缘时停止并且不均匀。我想让它延伸到页面的两端，让单词居中。谢谢你的帮助

HTML和PHP

<ul>
    <?php
    if ($path_parts['filename'] == "index") {
        print '<li class="activePage"><a id = "home">Home</a></li>';
    } else {
        print '<li><a href="index.php">Home</a></li>';
    }
    if ($path_parts['filename'] == "james") {
        print '<li class="activePage"><a id = "home">Social Media</a></li>';
    } else {
        print '<li><a href="data.php">Social Media</a></li>';
    }
    if ($path_parts['filename'] == "woods") {
        print '<li class="activePage"><a id = "home">Videos</a></li>';
    } else {
        print '<li><a href="woods.php">Videos</a></li>';
    }
    if ($path_parts['filename'] == "gretzky") {
        print '<li class="activePage"><a id = "home">Coaching</a></li>';
    } else {
        print '<li><a href="gretzky.php">Coaching</a></li>';
    }
    if ($path_parts['filename'] == "gretzky") {
        print '<li class="activePage"><a id = "home">About Me</a></li>';
    } else {
        print '<li><a href="gretzky.php">About Me</a></li>';
    }
    ?>
</ul>

CSS

    ul { 
        list-style-type: none;
}
ul li { 
    float: left;
}
ul li a { 
        font-family: 'Corben', Georgia, Times, serif;
    background: #000000; 
    color: white; 
    display: block; 
    padding: 30px 70px; 
    text-decoration: none; 
}
#home { 
        font-family: 'Corben', Georgia, Times, serif;
    background: #192faa; 
    color: white; 
    display: block; 
    padding: 30px 70px; 
    text-decoration: none; 
}
ul li a:hover { 
    background: #192faa; 
}

试试这个，你就不必手动给li width

ul {
display: table;
width: 100%;
padding: 0px;
}
ul li {
display: table-cell;
//remove float property
}

首先，在CSS中设置ul的宽度为ul {width:100%}。

然后，因为有5个<li>元素，所以将每个元素设置为il {width:20%;}
确保每个<li>元素删除任何其他高度/宽度CSS

试试这个:

ul { 
    display: table;
    list-style: none;
    width: 100%;
    padding-left: 0;
}
ul > li { 
    display: table-cell;
    text-align: center;
}