Question

我想要修复我的.nav并在页面上向下滚动，但我不知道如何阻止它在位置：固定时弄乱;投入。

        <div class="top">
        <p id="day"></p>
            <script>    {
                var d = new Date();
                var n = d.getDate();
                document.getElementById("day").innerHTML = n;
                }
            </script>
            /
        <p id="month"></p>  
            <script>    {
                var d = new Date();
                var n = d.getMonth();
                document.getElementById("month").innerHTML = n;
                }
            </script>
            /
        <p id="year"></p>
            <script>    {
                var d = new Date();
                var n = d.getYear();
                document.getElementById("year").innerHTML = n-100;
                }
            </script>

        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

        J O H N &nbsp; &nbsp; SM I T H
    </div>

    <div  class="nav">
        <ul>
            <li><a href="#">C O N A C T</a></li>
            <li><a href="#">A B O U T</a></li> 
            <li><a href="example2.html">H O M E</a></li>

        </ul>
    </div>

    <div class="main">
        This is my website.
    </div>

我如何实施“修复”我认为我可能做错了。

.top    {
background-color: #333333;
opacity:0.85;
padding: 16px;
color: white;
font-family: Lato;
font-size: 16px;
vertical-align: middle;
margin: 0;
position: fixed;
width: 100%;   }


.top p  {
display: inline;   }

.nav    {
top: 0;
left: 0;
position: fixed;   }


.nav li     {
list-style-type: none;
z-index: 1;
position: relative;
width: 115px;
margin-right: 40px;
text-align: center;
float: right;
right: 20px;   }


.nav a      {
    display: inline-block;
    padding: 15.5px;
    text-decoration: none;
    color: white;
    font-family: Lato;
    opacity: 0.6;   }

Answer 1

适用于position: fixed，但您需要设置right而不是left。

.nav {position: fixed; top: 0; right: 0;}
.nav ul {margin-top: 0;}

http://jsfiddle.net/cvdbumw7/6/

位置：固定;我的css菜单做了一些时髦的东西

1 个答案: