CSS-HTML-Resize屏幕
问题描述:
他在那里!CSS-HTML-Resize屏幕
我在基本网站上学习了解编码。 我不明白的是这个。
在CSS我有一个容器:宽度80% 里面我有一个标题:高度270px 在标题里面我有一个菜单。高度:65px
我没有设置标题和菜单的宽度,因为从容器的宽度是80%这是好的想法?或不?
嗯,它的作品,但。什么不工作是这样的.. 我想要菜单固定,因为当我滚动我想我的菜单与我一起去。
position:fixed; - 我的菜单较短?为什么?当我设定79%的宽度时,我会纠正这一点。但是,如果我调整我的屏幕菜单将走出我的容器在右侧..我不明白为什么?因为它在容器中。
有人可以解释一下吗?
CSS-
#container {
width: 80%;
height: auto;
margin-top: -1%;
padding: 0 10%;}
#header {
height: 270px;
background-color: gainsboro;}
#menu {
height: 65px;
float: left;
background: darkgrey;
position: fixed;}
#menu ul li {
list-style-type: none;
display: inline-block;
float: right;
margin: 20px 20px 0 0;}
a {
text-decoration: none;
font-family: sans-serif;
color: lightblue;
font-size: 21px;}
<div id="container">
<div id="header">
<div id="menu">
<ul>
<li><a href="#">Contact</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Services</a>
</li>
<li><a href="#">Home</a>
</li>
</ul>
</div>
</div>
</div>
答
移除浮子左。它是不necesary而利是显示:内联块。另外,在#menu中固定的revome位置和黑暗的菜单将具有100%的宽度。
#menu {
height: 65px;
background: darkgrey;
}
答
谢谢你,但100%的宽度是没有问题的。 如果我向下滚动,我想让我的菜单与我保持一致。 这就是为什么我设置固定位置。但是,菜单缩短了,我只希望它有100%的宽度。
如果我改正它的宽度为79%,我调整了我的屏幕菜单伸出右侧(容器外?!?),我不明白。
我希望你们明白我的问题。
答
使用左边:0代替float:左边。
#menu {
height: 65px;
width: 100%;
left: 0;
background: darkgrey;
position: fixed;
}
你必须使用媒体查询http://www.w3schools.com/css/css3_mediaqueries_ex.asp – Sankar
为什么不只是尝试将容器宽度设置为100%? – rhavendc