0

我正在尝试在我的网页上制作横幅，顶部的部分宽 700 像素，高 80 像素。

代码如下：

      <div class="container-narrow" style="heigth: 80px;">

        <img src="#" width="52" height="52" alt="my logo"  />

        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

      </div>

CSS：

    .container-narrow
    {
      margin: 0 auto;
      max-width: 700px;
      background: yellow;
    }

    ul
    {
      float: right;
      width: 100%;
      padding: 0;
      margin: 0;
      list-style-type: none;
    }

    a
    {
      float: right;
      width: 6em;
      color: black;
      text-decoration: none;
      padding: 0.2em 0.6em;
    }

    a:hover {color: #ccc; text-decoration: none;}

    li {display: inline;}

我想要的是图像和水平菜单在 80px 的中心垂直对齐。左边的标志和右边的菜单。

我试图设置高度，然后填充/边距以完成工作，但感觉很垃圾......

4

2 回答 2

0

首先，如果你有一个外部 CSS，这是一个很好的做法，不要在你的 HTML 块中添加额外的 CSS：

<div class="container-narrow">

并将高度样式放在你的css表中，因为无论如何你都有一个为你的div设置的类。

其次，如果你想让你的 CSS 正常工作，打错字会很痛苦，所以heigth你应该使用height, 而不是让你的 div 实际上有 80px 高。

第三：边距是位置元素。使用它们！

.container-narrow
    {
        height: 80px;
        margin: 0 auto;
        max-width: 700px;
        background: yellow;
    }
img
    {
        margin-top:14px;
    }

ul
    {
        float: right;
        padding: 0;
        margin: 0;
        list-style-type: none;
        margin-top:25px;
    }

a
    {
        width: 6em;
        color: black;
        text-decoration: none;
        padding: 0.2em 0.6em;
    }

a:hover {color: #ccc; text-decoration: none;}

li {display: inline;}

编辑

这主要适用于垂直对齐。如果你想水平自动居中，你可以利用这个margin:auto概念。这是可能的，因为页面不能超出浏览器宽度（浏览器高度可以扩展，因为您可以将滚动作为默认行为）。

于 2013-06-13T12:05:50.180 回答
0

问题：

ul如果你给它一个width:100%;黑色边框，你会看到它占据了页面的宽度，这意味着它没有空间驻留在黄色标题内的徽标左侧。

删除此宽度将产生以下结果：http: //jsfiddle.net/YBVe6/

现在，由于标题具有固定的最大宽度，即 700 像素，因此有很多方法可以使徽标和菜单居中。

我能想到的最快方法如下：

给ula display: inline-block;, (remove float: right;) 然后给标题 a text-align: center;，结果如下：http: //jsfiddle.net/YBVe6/1/

如果您希望菜单显示在上部，只需添加vertical-align: top;.

于 2013-06-13T12:03:53.193 回答