導航按鈕走出div

我的網站導航行爲奇怪2個按鈕走出div，我找不到原因。導航按鈕走出div

我想要的是2個藍色按鈕位於div的右側，但是如果我將它們浮起來，它們仍然不在div中。

圖像： enter image description here

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; 
    }

來源

2013-12-11 Robin

我想你wa註冊和登錄按鈕出現在右側還是？然後看看css atrribute'漂浮' –

@Igoel我知道關於漂浮，但事情是我可以漂浮他們，但正如你在圖片中看到的2個藍色按鈕arent甚至在棕色領域 – Robin

然後改變你的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

來源

2013-12-11 15:08:15 pnellesen

這可能是我的錯，但我認爲你誤解了這個問題我想要在div最右邊的2個藍色按鈕。 – Robin

非常感謝你 – Robin

啊 - 是的，我錯過了那部分。 – pnellesen

更新答案：

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; 
}

來源

2013-12-11 14:56:05 MikeF

Thx爲答案，但現在一切推到右側角落裏。 – Robin

@Robin - 請參閱我更新的樣式。另外檢查現場版本：http://jsfiddle.net/nVTzH/ – MikeF

首先：
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; 
}

來源

2013-12-11 15:24:22 matewka

也使用明確：既;完成你的花車。對於任何其他元素都沒有意外的行爲。 –

@StijnvanGrinsven什麼？ 'ul＃navigation'不會浮動。 – matewka

導航按鈕走出div

回答

相關問題