html - 在部分修复导航

标签 html css

我想修复我的导航。我的问题是,我想要一个特殊的职位。我有一个部分,该部分位于页面中间,带有 margin-left:auto & margin-right: auto。导航应固定在该部分的左边界。这是图片Picture .这是 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/

相关文章:

javascript - 使用 jsPDF 将多个不同的图像添加到 PDF

html - 调整浏览器大小时堆叠 Div

javascript - 滚动时的水平布局

javascript - 如何在向下滚动时隐藏标题,像 linkedin 菜单一样在向上滚动时显示

html - 表格元素与 div 的 React/HTML 最佳实践

css - 指定 Google 字体的样式和粗细

jquery - 如何创建响应式 div 组件?

javascript - 动态生成的表显示错误

html - 如何使元素不悬停在边框/轮廓上?

javascript - html css 分层表