Question

嘿伙计们不确定这笔交易是什么，但是当页面全屏显示时，所有内容都可以正常显示但是当浏览器调整到一半或足够大，以便将顶部导航栏从屏幕上移开时它只会将其切断关闭而不是动画，除非你将鼠标悬停在它上面。我是CSS的新手，所以我不确定是什么原因造成的，因为很多代码都是google-copypasted。所以，任何关于它可能是什么的诊断或想法都会很棒！

fiddle

Answer 1

好的，我已经完全重做了你的页面...所以这里是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
}

Answer 2

将overflow: hidden添加到＃navbar2 ul。而且，尝试自己看一下。并自己制作东西。并尝试着。

CSS切断了我网页的右侧。

2 个答案: