Question

我正在尝试使用类似于stackoverflow的设计来练习CSS。

当我无法水平滚动时，顶栏看起来很好。当我使窗口尺寸变小时，会出现水平滚动的功能。当我滚动时，它不会显示整个顶部背景。

半窗口，向右滚动：
http://puu.sh/dzSc5/12679216bd.png

CSS：

.topbar {
    font-size: .8em;
    z-index: 1;
    text-transform: lowercase;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #222222;
}

.topbar-wrapper {
    width: 900px;
    margin: 0 auto;
}

.topbar-wrapper ul {
    margin: 0;
    padding: 0;
}

.topbar-wrapper ul .home {
    float: left;
}

.topbar-wrapper ul li {
    display: inline;
    list-style: none;
    text-align: center;
    float: right;
    padding: 9px 0;
}

.topbar-wrapper ul li a {
    text-decoration: none;
    color: #E0E0D6;
    margin: 10px;
}

.topbar-wrapper ul li:hover {
    background-color: #444444;
}

HTML：

<div class="topbar">
            <div class="topbar-wrapper">
                <ul>
                    <span class="home">
                        <li><a href="/index.php">Home</a></li>
                    </span>
                    <li><a href="#">contact</a></li>
                    <li><a href="#">help</a></li>
                    <li><a href="#">tour</a></li>
                    <li><a href="/users/login.php">log in</a></li>
                    <li><a href="/users/signup.php">sign up</a></li>
                </ul>
            </div>
        </div>

Answer 1

每当窗口宽度为900像素或更低时，您就会遇到问题。对于“topbar-wrapper”的样式，您可以设置900的定义宽度。该宽度将不灵活，因此如果您的屏幕小于该宽度，它将添加一个水平滚动条。

设置'max-width：900'而不是设置'width：900'。这将使该元素更加灵活，因此如果需要，它可能会比900像素更薄。

Answer 2

而不是让你.topbar{position:absolute;}尝试，

body{
    margin:0;
    padding:0;
}

.topbar {
    font-size: .8em;
    z-index: 1;
    text-transform: lowercase;
    width: 100%;
    height:35px;
    background: #222222;
}

正如已经提到的那样。如果确保在CSS中添加介质宽度限制，则可以使用max-width，而不是设置固定宽度。这可能是导致您的问题的原因。我不能在jsfiddle中重现这个问题。

当屏幕尺寸变小时，绝对标题会被切断

2 个答案: