修复导航部分

我想修复导航。我的问题是，我想要一个特殊的位置。我有一个部分，这一部分是在页边的中间部分留有余量：auto & margin-right：auto。导航应该固定在该部分的左边界。这是一张图片。这里是myPage这里的代码：修复导航部分

*{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
body{ 
 
    background-color: #4A3A47; 
 
    height: 5000px; 
 
} 
 

 
section{ 
 
    width: 1200px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    background-color: black; 
 
} 
 

 

 
.divbox{ 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    width: 250px; 
 
    border: 4px solid #D7E8D5; 
 
    margin: 0 50px; 
 
    transition: all 0.5s; 
 
    margin-top: 200px; 
 
    margin-bottom: 200px; 
 
    background-color: #D7E8D5; 
 
} 
 

 
.divbox:hover{ 
 
    border-bottom-right-radius: 75px; 
 
    border-bottom-left-radius: 75px; 
 
} 
 

 

 

 
/* Bildern noch eine Klasse geben */ 
 

 
.divbox:hover img{ 
 
    border-bottom-right-radius: 75px; 
 
    border-bottom-left-radius: 75px;  
 
} 
 

 
img{ 
 
    transition: all 0.5s; 
 
} 
 

 
/*---------------*/ 
 

 
nav{ 
 
    position: fixed; 
 
    background-color: #D7E8D5; 
 
} 
 

 
nav ul{ 
 
    border: border: 4px solid #D7E8D5; 
 
} 
 

 
nav ul a { 
 
    display: block; 
 
    padding: 10px 20px; 
 
    color: #4A3A47; 
 
    text-decoration: none; 
 
    
 
}

<html> 
 
    <head> 
 
     <title>Startseite</title> 
 
     <link rel="stylesheet" href="index.css"> 
 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
 
    </head> 
 
    <body> 
 
     
 
     <nav> 
 
      <ul> 
 
       <li><a href="#">Link1</a></li> 
 
       <li><a href="#">Link1</a></li> 
 
      </ul> 
 
     </nav> 
 
     
 
     <section> 
 
      <article> 
 
       <div class="divbox"> 
 
        <img src="http://ipadminibackgrounds.com/assets/Battlefield-3-Game-iPad-mini-wallpaper-250x250.jpg" width="250" height="250" /> 
 
       </div> 
 
       <div class="divbox"> 
 
        <img src="http://static.planetminecraft.com/files/resource_media/screenshot/1341/11Minecraft-Creeper-Wallpaper-1080p-HD-250x250up_6509836_lrg.jpg" width="250" height="250" /> 
 
       </div> 
 
       <div class="divbox"> 
 
        <img src="https://lh5.googleusercontent.com/-Nv-tRjOe0Ww/AAAAAAAAAAI/AAAAAAAAAMQ/81G-ZfxzYNc/photo.jpg" width="250" height="250" /> 
 
       </div> 
 
      </article> 
 
     </section> 
 
    </body> 
 
</html>

来源

2015-01-16 Skeptar

喜欢这个？ -----> [Fiddle]（http://jsfiddle.net/4dkx8wrL/1/embedded/result/）。我猜你的意思是'位置：固定'。 –

是的，这是完美的！ :)现在我必须了解它，然后我很高兴。也许我以后会问：P，并且感谢你的评论！ – Skeptar

nav{ 
position: fixed; 
background-color: #D7E8D5; 
top:50%; 
}

我认为应该工作

来源

2015-01-16 22:51:41

感谢您的回答！ :)但是，我没有搜索到，但是，谢谢！ – Skeptar

哦，我想我知道你的意思，你是否试图将导航放置在你的部分，然后添加边距？ –

看看吧！ http://jsfiddle.net/0vanfrde/1/embedded/result/ –

修复导航部分

回答

相关问题