Question

我网页的导航菜单涵盖了网站的主要内容/内容（父母内部的内容）。当我向导航栏或父级添加边距时，导航栏会随着父级中的图像/内容一起向下移动。以下是代码：

CusomerID   Status      DateStart  DateEnd
----------- ----------- ---------- ----------
1           1           2016-01-01 2016-01-08
1           2           2016-01-08 2016-01-10
1           1           2016-01-10 2016-01-13
1           3           2016-01-13 NULL
2           1           2016-01-01 NULL
3           2           2016-01-09 2016-01-10
3           1           2016-01-10 2016-01-14

CSS

<html>
<head>
    <title>Digital Ethics</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="white">
    <div class="outer">
        <div class="nav">
            <div class="pic"><img src="logo.png" /><br><p><p></div>
            <div class="nav-bar">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Services</a></li>
                </ul>
            </div>
        </div>
        <div class="parent">
            <div class="bimg"></div>
            <div>
            <div></div>
            <div></div>
            </div>
        </div>
    </div>
</body>
</html>

请帮忙，提前谢谢。

Answer 1

这是添加了部分响应......

ul {
  display: flex;
  width: none;
  white-space: nowrap;
}

Answer 2

你应该设置你的资产净值的顶部，左边和右边，然后你可以改变你的父边缘 - 顶部（我想移动.bimg DIV）保持你的资产净值固定顶部。

<强> CSS

.nav {
    height: 180px;
    display: inline-block;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

Here a working fiddle

p.s：你的CSS .out定义中有一个拼写错误

宽度：100％PX;

Answer 3

从.parent班级移除身高。您必须将top: 0添加到导航类以将其修复到顶部。

这是这里的工作示例..

body {
    background-image: url("http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg");        
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 0px;
}

.outer {
    width:100%;
    height: auto;
    margin: 0px;
}

.nav {
    width: 100%;
    height: 180px;
    display: inline-block;
    background-color: white;
    position: fixed;
    top: 0;
}
.nav .pic{
    width: 40%
    float: left;
    display: inline-block;
    margin-left: 60px
}
.nav .pic p{
    color: a5a5a5;
    margin-left: 10px;
}
.nav-bar{
    width: 60%;
    float: right;
}
.nav-bar ul{
    list-style-type: none;
}
.nav-bar li{
    background-color: transparent;
    display: inline-block;
    padding: 10px;
    width: 150px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}
.nav-bar a{
    color: #4f4946;
    text-decoration: none;
}

.nav-bar a:hover{
    color: #eb4934;
    transition: 0.75s ease-out;
}

.nav-bar a:active{
    color: #eb4934;
    transition: 0.75s ease-out;
}


.parent {
    width: 80%;
    background-color: white;
    margin-top: 200px;
 
}

.bimg {
    background-image: url("https://support.files.wordpress.com/2009/07/pigeony.jpg?w=688");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    width: 100%;
}

<html>
<head>
    <title>Digital Ethics</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="white">
    <div class="outer">
        <div class="nav">
            <div class="pic"><img src="logo.png" /><br><p><p></div>
            <div class="nav-bar">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Services</a></li>
                </ul>
            </div>
        </div>
        <div class="parent">
            <div class="bimg"></div>
            <div>
            <div></div>
            <div></div>
            </div>
        </div>
    </div>
</body>
</html>

导航菜单涵盖主要网站内容

3 个答案: