如何使用CSS将徽标一直带到左侧

Question

我正在制作标题，徽标并非一直向左......

这是我的标题的样子：

正如你所看到的那样，它并不是一直向左......

这是我的标题html：

<header>
            <ul id="left-nav">
                <li><img class="logo" src="<?= base_url('images/') ?>jongerenkansrijkerlogo.png" alt="Jongeren kansrijker logo"/></li>
            </ul>
            <ul id="right-nav">
           <?php if((isset($_SESSION['werknemer_level']) && $_SESSION['werknemer_level'] == 1) || (isset($_SESSION['administrator_level']) && $_SESSION['administrator_level'] == 1)): ?>
            <li> <a href="<?php echo base_url() ?>index.php/Addjongere">Overzicht jongeren</a> </li> 
            <li> <a href="<?php echo base_url() ?>/index.php/Jongeren_activiteiten">Overzicht activiteiten</a> </li> 
            <li> <a href="<?php echo base_url() ?>/index.php/Addwerknemer">Overzicht medewerkers</a> </li> 
            <li> <a href="<?php echo base_url() ?>/index.php/Instituut">Overzicht Instituten</a> </li> 
            <li> <a href="<?php echo base_url() ?>/index.php/Auth/logout">Uitloggen</a> </li> 
            <?php endif;?>
            </ul>
        </header>

我用float：left;但它并非一直向左 css代码：

#left-nav{
    float:left;
}

#right-nav{
    float:right;
    margin-top:30px;
}

#right-nav li{
    display: inline-block;
    margin:10px;
}

有谁知道如何解决这个问题？ 感谢任何帮助表示赞赏

Answer 1

列表具有默认padding-left。删除它。

#left-nav{
    float:left;
    padding: 0; /* <-- add this line */
}