HTML/CSS 导航位置

Question

我在格式化 Nav 的位置时遇到问题。我刚刚完成了一个基本的网络开发类(class)，现在我自己在搞乱(代码并不完美)。

我尝试在另一个站点之后格式化主页，学习不同的做事方式，但我的 Nav1/Nav2 部分遇到了问题。我无法让它们在页面左边缘之间有 0 个间距。我用最小/最大宽度对所有内容进行了格式化，以便在我更改页面宽度时很好地扩展，但我终其一生都无法让它靠在页面左侧。

任何帮助都会很棒。

不确定要在此处发布多少，但我会把我猜的大部分内容都放上。

这是网站:My Test Page

索引页:

<?php
include ('top.php');
?>
<main>
    <article class="indexIMGArea">
        <figure>
            <img class="indexIMG" alt="Site Logo" src="pictures/index-e-sports-betting.jpg">
        </figure>
        <h2>FIRST TIME USER?</h2>
        <Table>
            <tr>
                <th>LIVE GAMES</th>
                <th>MATCH DETAILS</th>
                <th>CHAMPION ANALYTICS</th>
            </tr>
            <tr>
                <td>Check out stats for your games</td>
                <td>Find out the best builds</td>
                <td>Add depth to your knowledge</td>
            </tr>
            <tr>
                <td><a href="index.php"><img src="pictures/index-e-sports-betting.jpg" alt class="siteLogo"><span class="siteName">eSports Home</span></a></td>
            </tr>
        </Table>
    </article>
</main>
<?php
include ('footer.php');
?>
</body>
</html>

CSS:

html {
    background-color: #1f8ecd;
}

body{
    padding: 0px;
    margin: 0px;
}
/* ========================= Start of Index ==================================*/
.indexIMGArea{
    position: relative;
    width: 1080px;
    margin: 0 auto;
    padding: 10px;
}

.indexIMG{
    display: block;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}

.siteLogo{
    max-height: 25px;
}

#index table{
    width: 900px;
    height: 300px;
    margin: auto;
    background-color: whitesmoke;
    text-align: center;
}
/* ========================= End of Index ====================================*/
/* ========================= Start of Nav ====================================*/
.nav1{
    margin: auto;
    max-width: 1300px;
    min-width: 1080px;
    margin-bottom: -25px;
    font-size: 1.5em;
    padding: 0px;
}

.nav2{
    background-color: #1d2e51;
    text-align: left;
    width: 100%;
    font-size: 1.5em;
    height: 40px;
    margin-bottom:10px;
    padding: 0px;
}

nav ol li{
    display: inline-block;
    list-style-type: none;
    padding: 5px;
    text-align: left;
    width: max-content;
}

.navContainer1, .navContainer2{
    margin:auto;
    min-width: 1080px;
    max-width: 1300px;
}

nav a:link, nav a:visited{
    text-decoration: none;
    padding: 5px;
}

.navTop a:link, .navTopRight a:link, .navTop a:visited, .navTopRight a:visited{
    color: whitesmoke;
}

.navBot :link, .navBot a:visited{
    color: #1f8ecd;
}

.navBot li:hover{
    color:whitesmoke;
    border-bottom: 3px solid whitesmoke;
}

.activePage{
    border-bottom: 3px solid whitesmoke;
}

.navTop{
    float: left;
}

.navTopRight{
    float: right;
}

.navContainer1::after{
    content: "";
    clear:both;
    display:table;

}

/* ========================= End of Nav ======================================*/
/* ========================  Start of  Footer ================================*/
footer{
    font-size: 0.8em;
    padding: 2em;
    text-align: end;
}
/* ========================  End of Footer  ==================================*/

导航 1:

<nav class="nav1">
    <div class="navContainer1">
        <ol class="navTop">
            <li><a href="index.php"><img src="pictures/index-e-sports-betting.jpg" alt class="siteLogo"><span class="siteName">eSports Home</span></a></li>
            <li><a href="index.php">Home</a></li>
            <li><a href="index.php">Home</a></li>
            <li><a href="index.php">Home</a></li>
        </ol>

        <ol class="navTopRight">
            <li><a href="index.php"><img src="pictures/index-e-sports-betting.jpg" alt class="siteLogo"><span class="siteName">eSports Home</span></a></li>
        </ol>
    </div>
</nav>

导航 2:

<nav class="nav2">
    <div class="navContainer2">
        <ol class="navBot">
            <?php
            print '<li class="';
            if ($path_parts['filename'] == "index") {
                print ' activePage ';
            }
            print '">';
            print '<a href="index.php">Home</a>';
            print '</li>';

            print '<li class="';
            if ($path_parts['filename'] == "home") {
                print ' activePage ';
            }
            print '">';
            print '<a href="index.php">Home</a>';
            print '</li>';

            print '<li class="';
            if ($path_parts['filename'] == "home") {
                print ' activePage ';
            }
            print '">';
            print '<a href="index.php">Home</a>';
            print '</li>';

            print '<li class="';
            if ($path_parts['filename'] == "home") {
                print ' activePage ';
            }
            print '">';
            print '<a href="index.php">Home</a>';
            print '</li>';
            ?>
        </ol>
    </div>
</nav>

顶部:

<?php
$phpSelf = htmlentities($_SERVER['PHP_SELF'], ENT_QUOTES, "UTF-8");

$path_parts = pathinfo($phpSelf);
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test eSports Site</title>

        <meta charset="utf-8">
        <meta name="description" content="Test page for a potential eSports site">
        <meta name="keywords" content="eSports">
        <meta name="author" content="John DeMarche">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="../appleBottomedJeans/css/custom.css" type="text/css" media="screen">

        <?php
        $debug = false;

        $domain = '//';

        $server = htmlentities($_SERVER['SERVER_NAME'], ENT_QUOTES, 'UTF-8');

        $domain .= $server;

        if ($debug) {
            print '<p>php Self: ' . $phpSelf;
            print '<pdomain: ' . $domain;
            print '<p>Path Parts<pre>';
            print_r($path_parts);
            print '</pre></p>';
        }
        ?>

    </head>

    <?php
    print '<body id="' . $path_parts['filename'] . '">' . PHP_EOL;

    include ('nav1.php');
    print PHP_EOL;

    include ('nav2.php');
    print PHP_EOL;

    if ($debug) {
        print '<p>DEBUG MODE IS ON</p>';
    }

    print "<!-- End of top.php -->";
    ?>

Answer 1

我不是 100% 确定我理解你的问题。但是，如果我这样做，您希望您的 Nav 尽可能靠近窗口的左边缘。 所以，你目前拥有的是:

您有一个由 ol 引起的空格(图片中的绿色部分)，该空格通常用于计算 (1. 2. 3. 4. ...)。要删除该位置，您只需在 css 中将 paddling-left: 0 添加到您的 ol.navTop。您可以对 ol.NavBot 执行相同的操作，结果如下:

希望对你有帮助!