1

我对前端开发相对较新，因此在寻找组织水平菜单的最佳方法时遇到了一些问题，该菜单将包含一个徽标和一些菜单选项。另外，我想将水平菜单分开一个宽 |

不知道该怎么做。

这是我到目前为止所拥有的：

HTML： 

 <header> 
 <img src="/images/logo.png" height="50px" id="front" />
 <nav>
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </nav>

CSS： 

 body {
 margin: 0;
 background-color: #FFFFFF;
 }
 header {
 background-color: #009000;
 height: 85px;
 position: relative;
 }
 #front {
 margin-left: 20px;
 margin-top: 20px;
 }
 ul li {
 display: inline;
 list-style-type: none;
 margin-right: 34px;
 }
4

3 回答 3

1

使用display: inline-block;和float: left;。

此外，放置float:left;在您的#frontcss 部分中以获取标题内的导航。

于 2012-11-28T22:54:38.933 回答
1

这对我有用。每个列表元素（使用选择器“ul li”获得）没有使用管道字符，而是有一个细的右侧边框。您还可以<li> | </li>在每个列表项之间添加。

另外，我将 li 元素向左浮动，而不是内联显示它们。不确定您是否想要标题内的导航。

HTML：

<header>
  <img src="/images/logo.png" height="70px" id="front" />
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li class="last"><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

CSS：

body {
    margin: 0;
}
header {
    background-color: #009000;
    height: auto;
    position: relative;
}
#front {
    margin-left: 20px;
    margin-top: 20px;
    float: left;
}
nav {
    float: left;
    margin-top: 30px;
}
ul {
    margin: 0;
    padding: 0;
    float: left;
}
ul li {
    list-style-type: none;
    float: left;
    border-right: 2px solid black;
    padding-right: 5px;
    padding-left: 5px;
}
ul li.last {
    border-right: 0px;
}
于 2012-11-28T23:09:11.087 回答
1

虽然我会使用 DIV 而不是 ul/li 创建它，但这里是可以帮助您入门的 css：

body { margin:0; background-color:#FFFFFF; }
header { background-color:#009000; height:85px; position:relative; }
header:after { content:''; display:block; clear:both; }
header img { float:left; margin:20px 20px 0 20px; }
header ul { list-style-type:none; }
header ul li { float:left; margin-right:34px; border-left:1px solid #000000; padding-left:10px; }
header ul li:first { border:none; padding:0; }

你会看到我做的一些不同的事情是：

1）我在页眉上使用了清除修复系统，这样当您使用浮动时，它们将被清除，您不必担心在页眉之后它们。

2）我将图像向左浮动并在右侧添加了一些边距。

3）由于您使用的是ul / li，因此您需要关闭子弹list-style-type:none;

4）我浮动 li 元素并在左侧给它们每个边框，但随后我删除了第一个 li 的边框和填充。

您也可以通过使用display:inline-block;我觉得使用 DIV 会更简洁的代码来完成此操作，但我不想更改您的 html，而只是向您展示了如何使用 css 完成此操作。

于 2012-11-28T23:28:17.960 回答