0

我有一个部分和一个 div 一个接一个，我想让 div 稍微低于 margin-top:-10px 的部分，以切断我用border-radius创建的圆角。现在所发生的只是顶部部分向上移动，其中的文本位于 div 顶部，而不是部分本身。这是 jsfiddle http://jsfiddle.net/37PkJ/中的内容。基本上我不会让橙色和黑色落在蓝色之下。谢谢

html/wordpress

<?php
/*
Template Name:Home
*/
?>
<?php get_header(); ?>
    <section id="mastHead">
        <div id="navResponsive">
            <ul>
                <li><a href="#about">about</a></li>
                <li><a href="#skills">skills</a></li>
                <li><a href="#contact">contact</a></li>
                <li><a href="#footer"><i class="icon-twitter"></i></a></li>
                <li><a href="http://www.linkedin.com/pub/austin-kitson/31/143/296" target="_blank"><i class="icon-linkedin"></i></a></li>
            </ul>
        </div>
        <div id="nav">
            <ul>
                <li><a href="#about">about</a></li>
                <li><a href="#skills">skills</a></li>
                <li><a href="#contact">contact</a></li>
                <li><a href="#footer"><i class="icon-twitter"></i></a></li>
                <li><a href="http://www.linkedin.com/pub/austin-kitson/31/143/296" target="_blank"><i class="icon-linkedin"></i></a></li>
            </ul>
        </div>
    </section>
    <div id="menu">
        <div id="menuCenter">
            <a href="toggleMenu"><i class=" icon-reorder"></i></a>
        </div>
    </div>
<?php get_footer(); ?>

css

html {
  font-size: 62.5%; }

#container {
  background: aqua;
  width: 100%; }

#mastHead li {
  list-style-type: none; }

ul {
  margin: 0;
  padding: 0; }

#navResponsive {
  display: none; }

#menu {
  display: none; }

/*-------------MEDIA QUERIES BITCHES---------------*/
/*-------------------------------------------------*/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width: 320px) and (max-width: 1024px) {
  #navResponsive {
    display: block;
    background: #44749d;
    width: 50%;
    margin-left: auto;
    margin-right: auto; }
    #navResponsive li {
      text-align: center; }
    #navResponsive a {
      font-size: 3em; }

  #nav {
    display: none; }

  #menu {
    display: block;
    width: 50%;
    background: orange;
    margin-left: auto;
    margin-right: auto; }

  #menuCenter {
    width: 4.5em;
    padding: 1em;
    border-radius: 0.5em;
    margin-left: auto;
    margin-right: auto;
    background: black; }
    #menuCenter a {
      text-decoration: none; }
    #menuCenter i {
      font-size: 5em; } }
/*---------------END MEDIA QUERIES-----------------*/
/*-------------------------------------------------*/
4

1 回答 1

2

我必须在 mastHead div 上将位置设置为相对位置。简单的。

于 2012-12-27T01:58:22.417 回答