CSS：向下移动无序列表元素

时间：2016-04-20 13:03:42

标签： html css

我有一个ul元素作为我网页顶部导航栏的一部分，我想稍微向下移动它。这是当前导航栏的图像：

image

我想稍微向下移动，以便文字可以与页面顶部的白条相匹配。

以下是HTML的摘录：

<!-- Nav -->
<nav id="nav">
    <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="#who">WHO WE ARE</a></li>
        <li><a href="#what">WHAT WE DO</a></li>
        <li><a href="#contact">GET IN TOUCH</a></li>
    </ul>
</nav>

如何使用CSS执行此操作？

编辑：

以下是所有HTML代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Serenity</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="assets/css/main.css" />
        <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="assets/bootstrap-datepicker-1.5.1-dist/css/bootstrap-datepicker.css"/>
        <link href="master.css" rel="stylesheet"/>
        <script src="master.js"></script>
        <script type="text/javascript" src="assets/bootstrap-datepicker-1.5.1-dist/js/bootstrap-datepicker.js">
            $('#sandbox-container input').datepicker({
                format: "dd/mm/yyyy"
            });
        </script>
        <script>
            $(function () {
                $('[data-toggle="tooltip"]').tooltip()
            });
        </script>
        <style type="text/css">
            html, body{
                margin: 0;
                padding:0;
                border: 0;
            }
         </style>
    </head>

<body class="homepage">
    <div id="page-wrapper">
        <!-- Header -->
        <div id="header">
            <!-- Inner -->
            <div class="inner" id="app">

            </div>

            <!-- Nav -->
            <nav id="nav">
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="#who">WHO WE ARE</a></li>
                    <li><a href="#what">WHAT WE DO</a></li>
                    <li><a href="#contact">GET IN TOUCH</a></li>
                </ul>
            </nav>
        </div>

        <!-- Who -->
        <div class="wrapper style1">
            <article id="who" class="container special">
                <header>
                    <h2></h2>
                    <p>

                    </p>
                </header>
                <footer>
                    <img style='margin-bottom: 10px' src="./assets/images/mascot.png" height="200" width="170">
                    <div style='margin-top: 10px'>
                        <a href="./theteam.html" class="button">Meet the team</a>
                    </div>
                </footer>
            </article>
        </div>

        <!-- Main -->
        <div class="wrapper style1">
            <article id="what" class="container special">
                <header>
                    <h2><a href="#">So what is Serenity?</a></h2>
                    <p>

                    </p>
                </header>
                <footer>
                    <div>
                        <a href="#" class="button" data-toggle="modal" data-target="#myModal">Privacy</a>
                    </div>
                </footer>
            </article>
        </div>

        <!-- Footer -->
        <div id="footer">
            <!-- Contact -->
            <section id="contact" class="contact">
                <header>
                    <h3>Drop by and say hi!</h3>
                </header>
                <ul class="icons">
                    <li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
                    <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                    <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                    <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
                </ul>
            </section>

            <!-- Copyright -->
            <div class="copyright">
                <ul class="menu">
                </ul>
            </div>
        </div>
    </div>
</body>

1 个答案:

答案 0 :(得分：9)

margin-top很可能是您正在寻找的。

以下是将margin-top添加到内部<style>的代码。请记住，缺少原始CSS文件，因此我无法根据图像向您显示差异。 <ul>已突出显示已在其上方应用保证金。

请注意，如果您只想将margin-top应用于主导航<ul>，则应该唯一地指定它（例如与类一起），以便它可以不会影响文档中的所有<ul>。

＆＃13;
＆＃13; 
<!DOCTYPE HTML>
<html>
    <head>
        <title>Serenity</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="assets/css/main.css" />
        <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="assets/bootstrap-datepicker-1.5.1-dist/css/bootstrap-datepicker.css"/>
        <link href="master.css" rel="stylesheet"/>
        <script src="master.js"></script>
        <script type="text/javascript" src="assets/bootstrap-datepicker-1.5.1-dist/js/bootstrap-datepicker.js">
            $('#sandbox-container input').datepicker({
                format: "dd/mm/yyyy"
            });
        </script>
        <script>
            $(function () {
                $('[data-toggle="tooltip"]').tooltip()
            });
        </script>
        <style type="text/css">
            html, body{
                margin: 0;
                padding:0;
                border: 0;
            }
          ul {
            margin-top: 50px;
            background: cyan;
          }
         </style>
    </head>

<body class="homepage">
    <div id="page-wrapper">
        <!-- Header -->
        <div id="header">
            <!-- Inner -->
            <div class="inner" id="app">

            </div>

            <!-- Nav -->
            <nav id="nav">
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="#who">WHO WE ARE</a></li>
                    <li><a href="#what">WHAT WE DO</a></li>
                    <li><a href="#contact">GET IN TOUCH</a></li>
                </ul>
            </nav>
        </div>

        <!-- Who -->
        <div class="wrapper style1">
            <article id="who" class="container special">
                <header>
                    <h2></h2>
                    <p>
                       
                    </p>
                </header>
                <footer>
                    <img style='margin-bottom: 10px' src="./assets/images/mascot.png" height="200" width="170">
                    <div style='margin-top: 10px'>
                        <a href="./theteam.html" class="button">Meet the team</a>
                    </div>
                </footer>
            </article>
        </div>

        <!-- Main -->
        <div class="wrapper style1">
            <article id="what" class="container special">
                <header>
                    <h2><a href="#">So what is Serenity?</a></h2>
                    <p>
                      
                    </p>
                </header>
                <footer>
                    <div>
                        <a href="#" class="button" data-toggle="modal" data-target="#myModal">Privacy</a>
                    </div>
                </footer>
            </article>
        </div>

        <!-- Footer -->
        <div id="footer">
            <!-- Contact -->
            <section id="contact" class="contact">
                <header>
                    <h3>Drop by and say hi!</h3>
                </header>
                <ul class="icons">
                    <li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
                    <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
                    <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
                    <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
                </ul>
            </section>

            <!-- Copyright -->
            <div class="copyright">
                <ul class="menu">
                </ul>
            </div>
        </div>
    </div>
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题