Question

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

不知道该怎么做。

这是我到目前为止所做的：

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;
 }

Answer 1

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

另外，将float:left;放在#front css部分中以获取标题内的导航。

Answer 2

这对我有用。而不是使用管道字符，每个列表元素（使用选择器“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;
}

Answer 3

虽然我会用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完成这个。

如何对齐措辞元素旁边的流元素？

3 个答案: