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

Question

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

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

我想稍微向下移动它,这样文本就可以与页面顶部的白条相匹配.

这是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>

Run Code Online (Sandbox Code Playgroud)

我怎么能用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

tim*_*awl 9

margin-top 很可能是你正在寻找的.

这是您margin-top添加到内部的代码<style>.请记住,缺少原始CSS文件,因此我无法根据图像向您显示差异.在<ul>已经凸显,以表明利润率已经应用在它上面.

请注意,如果您只想margin-top应用于主导航<ul>,则应该唯一地指定它(例如,使用类),以便它不会影响<ul>文档中的所有s.

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，7 月前
查看次数：	1260 次
最近记录：	9 年，7 月前