0

对于我的一个项目，我决定开始使用响应式设计。我使用的指南不是明确的，纯粹是介绍性的，所以我在某个地方迷路了，在这里找不到问题。如果使用下面的代码，您将为自己呈现一个导航菜单。它在 13 英寸的屏幕上看起来不错，但是通过缩短浏览器的宽度来缩小屏幕尺寸，您会注意到导航菜单将占据徽标的空间。我该如何调整它，以使导航菜单不会位于徽标的顶部，并且可能会在它越过徽标之前停止？

HTML： 

<header class="bar_top">
    <div class="logo_block">
        <a href="index.php">
            <img alt="Logo" src="/logo.png" class="logo">
        </a>
    </div>
    <nav class="menu_above">
        <ul class="menu">
            <li class="menu_inner"><a href="#">Home</a></li>
            <li class="menu_inner"><a href="#">Our Products</a></li>
            <li class="menu_inner"><a href="#">Services</a></li>
            <li class="menu_inner"><a href="#">About Company</a></li>
            <li class="menu_inner"><a href="#">Contact</a>
                <ul class="menu_layer">
                    <li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 1</a>
                    </li>
                    <li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 2</a>
                    </li>
                    <li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 3</a>
                    </li>
                </ul>
            </li>
            <span class="phone_us">000-000-0000</span>
        </ul>
    </nav>
</header>

CSS：

.bar_top {
    background-color: #FFFFFF;
    font-size:14.5px;
    width: 100%;
    height: 82px;
    top: 0;
    left: 0;
    position:absolute;
    z-index: 99;
}

.logo_block {
    display: block;
    position: absolute;
    z-index: 998;
}
.logo {
    margin-left: 30px;
    margin-top: -3px;
    height: 85px;
}
.menu_above {
    width: 960px;
    margin:  40px auto;
    float:right;
}
.menu_layer {
    margin-left: -40px;
}
.menu_contact_is {
    color: #ffffff !important;
}
a.menu_contact_inner {
    color: #ffffff !important;
}
.phone_us {
    font-size: 1.5625em;
    margin-left: 75px;
}
4

2 回答 2

1

如果您试图将菜单保留在页面左侧的徽标旁边，您应该尝试以下操作：

 .logo_block {
      display: inline-block;
      vertical-align: top;
  }

.menu_above {
        margin: 40px auto;
        display: inline-block;
 }

使用 div 容器包装内容是很常见的，该容器在两侧具有固定的 with 和自动边距，以使其保持在页面的中心。

当您使用不必要的相对定位时，您还应该考虑修改页面上的其他元素。;)

于 2013-04-23T04:24:39.080 回答
1

试试属性 margin: auto; 将元素设置在屏幕或容器的中心，而不是使用静态值来定位元素

您还可以阅读有关灵活设计和响应式设计的信息来了解。

于 2013-04-23T01:45:54.280 回答