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>

来源

2016-08-16 Barry B

你必须使用媒体查询http://www.w3schools.com/css/css3_mediaqueries_ex.asp – Sankar

为什么不只是尝试将容器宽度设置为100％？ – rhavendc

移除浮子左。它是不necesary而利是显示：内联块。另外，在#menu中固定的revome位置和黑暗的菜单将具有100％的宽度。

#menu { 
    height: 65px; 
    background: darkgrey; 
    }

Your code will look like this

来源

2016-08-16 09:26:12

谢谢你，但100％的宽度是没有问题的。如果我向下滚动，我想让我的菜单与我保持一致。这就是为什么我设置固定位置。但是，菜单缩短了，我只希望它有100％的宽度。

如果我改正它的宽度为79％，我调整了我的屏幕菜单伸出右侧（容器外？！？），我不明白。

我希望你们明白我的问题。

来源

2016-08-16 10:02:21

使用左边：0代替float：左边。

#menu { 
    height: 65px; 
    width: 100%; 
    left: 0; 
    background: darkgrey; 
    position: fixed; 
}

来源

2016-08-16 13:40:56 lwozniak

CSS-HTML-Resize屏幕

回答

相关问题