php - 导航按钮超出了 div

Question

我的网站导航行为很奇怪，2 个按钮超出了 div，我找不到原因。

我想要的是 2 个蓝色按钮位于 div 的右侧，但如果我将它们 float ，它们仍然不在 div 之外。

图片:

HTML:

    <div id="navigation">
        <ul>
                <li><a href="index.php">Home</a></li>
                <li><a href="newadvertentie.php">plaats advertentie</a></li>
                <li><a href="advertenties.php">Advertenties</a></li>
        </ul>
        <ul>
            <?php
            session_start();
            echo '<div id="login">';
                if(isset($_SESSION['username'])){
                    echo'<li><a href="profile.php">Profile</a></li>
                         <li><a href="logout.php">Logout</a></li>';
                }else{
                    echo'<li><a href="register.php">Register</a></li>';
                    echo'<li><a href="login.php">Login</a></li>';
                }
            echo '</div>';
            ?>
        </ul>
   </div>

CSS:

            #navigation{
        border:1px solid;
        border-radius: 2px;
        height:50px;
        margin-top:1%;
        margin-bottom:1%;
        background:#6F4E37;
        border-radius:8px;
    }

    #navigation ul
    {
        margin: 0;
        padding-top:1%;
        border:1px solid;
    }

    #navigation ul li
    {
        display: inline;
    }

    #navigation li a
    {
        padding:10px;
        margin:0.5%;
        background: #6F4E37;
        color:black;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: solid 1px #20538D;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        -webkit-transition-duration: 0.2s;
        -moz-transition-duration: 0.2s;
        transition-duration: 0.2s;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
        text-decoration: none;
    }



    #login li a
    {
        background:#b2fff1;
        padding:10px;
        margin:0.5%;
        background:#b2fff1;
        color:black;
        text-decoration: none;
    }

    #navigation li a:hover {
        background: #805a3f;
        border: solid 1px #2A4E77;
        text-decoration:underline;
     }

    #login li a:hover
    {
        background:#4cffdf;
        border: solid 1px #2A4E77;
        text-decoration:underline;
    }

Answer 1

<?php
        session_start();
        echo '<div id="login">';
            if(isset($_SESSION['username'])){
                echo'<li><a href="profile.php">Profile</a></li>
                     <li><a href="logout.php">Logout</a></li>';
            }else{
                echo'<li><a href="register.php">Register</a></li>';
                echo'<li><a href="login.php">Login</a></li>';
            }
         echo '</div>';
        ?>

然后更改您的 CSS:

        #navigation {
            border:1px solid;
            border-radius: 2px;
            height:50px;
            margin-top:1%;
            margin-bottom:1%;
            background:#6F4E37;
            border-radius:8px;
        }
        #navigation ul {
            margin: 0;
            padding-top:1%;
            border:1px solid;
        }
        #navigation ul li {
            display: inline;
        }
        #navigation li a {
            padding:10px;
            margin:0.5%;
            background: #6F4E37;
            color:black;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            border: solid 1px #20538D;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
            -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
            -webkit-transition-duration: 0.2s;
            -moz-transition-duration: 0.2s;
            transition-duration: 0.2s;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
            text-decoration: none;
        }
        #login {
            float:right;
        }
        #login li {
            float:left;
            padding-left:10px;
        }
        #login li a {
            background:#b2fff1;
            padding:10px;
            margin:0.5%;
            background:#b2fff1;
            color:black;
            text-decoration: none;
        }
        #navigation li a:hover {
            background: #805a3f;
            border: solid 1px #2A4E77;
            text-decoration:underline;
        }
        #login li a:hover {
            background:#4cffdf;
            border: solid 1px #2A4E77;
            text-decoration:underline;
        }

Fiddle Here