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 > <div ID="page-wrapper"> <!-- header --> <div ID="header"> <!-- Inner --> <div 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 > <article ID="who" > <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" >Meet the team</a> </div> </footer> </article> </div> <!-- Main --> <div > <article ID="what" > <header> <h2><a href="#">So what is Serenity?</a></h2> <p> </p> </header> <footer> <div> <a href="#" data-toggle="modal" data-target="#myModal">Privacy</a> </div> </footer> </article> </div> <!-- Footer --> <div ID="footer"> <!-- Contact --> <section ID="contact" > <header> <h3>Drop by and say hi!</h3> </header> <ul > <li><a href="#" ><span >Email</span></a></li> <li><a href="#" ><span >Twitter</span></a></li> <li><a href="#" ><span >Facebook</span></a></li> <li><a href="#" ><span >Instagram</span></a></li> </ul> </section> <!-- copyright --> <div > <ul > </ul> </div> </div> </div></body>解决方法 margin-top很可能是您正在寻找的. 以下是将margin-top添加到内部< style>的代码.请记住,缺少原始CSS文件,因此我无法根据图像向您显示差异. < ul>已经突出显示已在其上方应用保证金.
请注意,如果您只想将margin-top应用于主导航< ul>,则应该唯一地指定它(例如,使用类),以便它不会影响文档中的所有< ul>.
<!DOCTYPE HTML><HTML> <head> <Title>Serenity</Title> <Meta charset="utf-8" /> <Meta name="vIEwport" content="wIDth=device-wIDth,body{ margin: 0; padding:0; border: 0; } ul { margin-top: 50px; background: cyan; } </style> </head><body > <div ID="page-wrapper"> <!-- header --> <div ID="header"> <!-- Inner --> <div 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 > <article ID="who" > <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" >Meet the team</a> </div> </footer> </article> </div> <!-- Main --> <div > <article ID="what" > <header> <h2><a href="#">So what is Serenity?</a></h2> <p> </p> </header> <footer> <div> <a href="#" data-toggle="modal" data-target="#myModal">Privacy</a> </div> </footer> </article> </div> <!-- Footer --> <div ID="footer"> <!-- Contact --> <section ID="contact" > <header> <h3>Drop by and say hi!</h3> </header> <ul > <li><a href="#" ><span >Email</span></a></li> <li><a href="#" ><span >Twitter</span></a></li> <li><a href="#" ><span >Facebook</span></a></li> <li><a href="#" ><span >Instagram</span></a></li> </ul> </section> <!-- copyright --> <div > <ul > </ul> </div> </div> </div></body> 总结 以上是内存溢出为你收集整理的html – CSS：向下移动无序列表元素全部内容，希望文章能够帮你解决html – CSS：向下移动无序列表元素所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）