Question

我已经学习HTML / CSS大约两周了。

我一直在制作虚拟网站仅仅是为了练习而且我最近因头部问题而苦苦挣扎。我会发布代码/图片以帮助我尽可能具体。

我试图在我的网页上标题，顶部是纯色背景，标题左侧是徽标（标题），右侧是导航/搜索栏所有在1020px的容器内。

所有东西看起来都很好看全屏但是当我将浏览器的半宽放入时，它似乎使我的导航/搜索栏从右侧的屏幕上移开，当我滚动标题时，背景颜色丢失了。

我不确定为什么要这样做，如果有人有解决方法，你可以向我解释为什么它会这样做但是我怎么/为什么需要做我需要做的事情做修复它。非常感谢你！

我的HTML文件

<html>

    <head>
        <title>Dummy Site</title>
        <link rel="stylesheet" type="text/css" href="stylez.css">
    </head>

    <body>


        <header>

            <div class="container">
                <div id="logo">
                    <h1>Another Dummy Site</h1>
                    <em>Just another dummy web page</em>
                </div>

                <div id="nav">
                    <nav>
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </nav>

                    <form>
                        <input type="search" placeholder="search 4 somethin">
                    </form>
                </div>

            </div>

            <div class="clearfix"></div>

        </header>

    </body>

</html>

CSS：

*{
margin: 9;
padding: 9;
}
body {
font-family: monospace, sans-serif;
width: 109%;
background: #ccc;
}

header{
background: #fc9;
}

.container{
width: 1020px;
margin: 9 auto;
}

#logo{
float: left;
}

#nav{
float: right;
}
.clearfix::after{
content:"";
clear: both;
display: table;
}

以下是全屏幕的图片

这是浏览器半屏中的图片 - 注意滚动条并在右侧切断。

这是我滚动到右边的图片

Answer 1

试试这个

.container {
   max-width:1020px;
   width:100%;
   margin:0 auto;
 }

jsfiddle

当浏览器处于半屏幕时，HTML / CSS标题在右侧折叠

1 个答案: