我想修复我的导航。我的问题是,我想要一个特殊的职位。我有一个部分,该部分位于页面中间,带有 margin-left: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>
最佳答案
nav{
position: fixed;
background-color: #D7E8D5;
top:50%;
}
我觉得应该可以
关于html - 在部分修复导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27993942/