Question

这是我的网站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; 
}

Answer 1

尝试此操作，您无需手动提供li width

ul {
display: table;
width: 100%;
padding: 0px;
}

ul li {
display: table-cell;
//remove float property
}

Answer 2

首先，在CSS中将ul的宽度设置为ul {width:100%}
然后，因为有5 <li>个元素，请将每个元素设置为il {width:20%;} 请务必删除与每个CSS元素相关的任何其他高度/宽度<li>。

Answer 3

试试这个：

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

在整个页面上拉伸CSS导航栏

3 个答案: