CSS切斷了我網頁的右側。

-1

嘿，大家不知道這筆交易是什麼，但是當頁面處於全屏狀態時，所有內容都可以正常顯示，但是當瀏覽器的大小縮小到一半或足以讓頂部導航欄離開屏幕時，它會將其切斷除非您將鼠標懸停在其上，否則不會生成動畫。我是超新的CSS，所以我不確定會是什麼原因導致它，因爲很多代碼都是谷歌翻版。所以是啊任何診斷或想法可能會是真棒！CSS切斷了我網頁的右側。

fiddle

來源

2012-07-29 city

我猜你需要清理整個標記和樣式 – 2012-07-29 19:44:27

所以，如果你不再被引用源複製該代碼，它的破產，以及你想讓社區解決它？ – 2012-07-29 19:48:12

@flem是的，我想你是否看到過標記？你將不得不坐一個小時來清理它。 – 2012-07-29 19:51:39

好的，我已經完全重做你的網頁...所以這裏是在jsFiddle：http://jsfiddle.net/VW7yK/1/。

如果瀏覽器窗口的大小縮小，菜單將自動換行（請參閱小提琴）。

HTML：

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Site Title</title> 
    <style type="text/css"> 
/* Style here */ 
    </style> 
</head> 
<body> 
    <div> 
     <ul id="nav"> 
      <li> 
       <a href="/">Home</a> 
      </li> 
      <li> 
       <a href="/signupcentral/">Signup Central</a> 
      </li> 
      <li> 
       <a href="/submit/">Submit</a> 
      </li> 
      <li> 
       <a href="/contactus/">Contact Us</a> 
      </li> 
      <li> 
       <a href="/faq/">FAQ</a> 
      </li> 
      <li> 
       <a href="/logout/">Logout</a> 
      </li> 
     </ul> 
    </div> 
    <div id="content"> 
     <h1>Heading</h1> 
     Content here. 
    </div> 
    <div id="footer"> 
     <div> 
      &copy; 2012 HTML Footer Inc. All rights reserved. 
     </div> 
    </div> 
</body> 
</html>

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100% 
} 
body { 
    font-family: Arial, Helvetica, sans-serif 
} 
#nav { 
    margin: 0; 
    min-width: 200px; 
    min-height: 50px; 
    overflow: auto; 
    text-align: center; 
    list-style: none; 
    line-height: 50px; 
    font-size: 1.5em; 
    background: #369; 
    border: 1px solid #000 
} 
#nav li { 
    float: left; 
    background: #369; 
    border: 1px solid #338; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    transition: background .2s; 
    -moz-transition: background .2s; 
    -webkit-transition: background .2s; 
    -o-transition: background .2s; 
    -ms-transition: background .2s 
} 
#nav li:hover { 
    background: #36f 
} 
#nav li a { 
    display: block; 
    padding: 0 25px; 
    text-decoration: none; 
    color: #fff 
} 
#content { 
    padding: 30px 
} 
#footer { 
    position: absolute; 
    top: 100%; 
    margin-top: -50px; 
    width: 100%; 
    height: 50px; 
    line-height: 50px; 
    text-align: center 
} 
#footer div { 
    display: inline-block; 
    min-width: 300px; 
    padding: 0 20px; 
    background: #369; 
    border-radius: 20px 20px 0 0; 
    -moz-border-radius: 20px 20px 0 0; 
    -webkit-border-radius: 20px 20px 0 0 
}

來源

2012-07-29 22:25:32

添加overflow: hidden到＃navbar2 UL認證。而且，嘗試自己看看東西。自己做東西。並嘗試所有。

來源

2012-07-29 21:05:49 Chad

CSS切斷了我網頁的右側。

回答

相關問題