导航按钮走出div

Question

我的网站导航行为奇怪的2个按钮走出div，我无法找到原因。

我想要的是2个蓝色按钮位于div的右边但如果我漂浮它们仍然不在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

Answer 2

<强>第一：
white-space 是你的朋友。不要将PHP中的所有内容粘在一起。

<强>第二：
不允许立即使用div作为ul元素的子元素。如果您需要添加id属性，请将其添加到ul

<ul id="login">
     <?php
          session_start();
           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>';
           }
     ?>
</ul>

<强>第三：
切换ul个位置并将id="login"向右浮动：

<ul id="login">
     <?php
          session_start();
           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>';
           }
     ?>
</ul>
<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>

CSS：

#login {
    float: right;
}

Answer 3

更新回答：

HTML

<div id="navigation">
    <ul class="leftnav">
            <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 class="rightnav">
        <?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>

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.leftnav {
    float: left;
}
#navigation ul.rightnav {
    float: right;
}
#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;
}