中心导航栏并添加顶部/底部边框答案

【问题标题】：Center navbar and add top/bottom-borders中心导航栏并添加顶部/底部边框
【发布时间】：2012-07-18 19:04:09
【问题描述】：

我想（自动）将导航栏置于this site 的中心。另外，我需要有一个 1px 的边框顶部和 1 像素的边框底部，以扩展大约 70% 的导航区域。

完成后它应该看起来像这个模型：

【问题讨论】：

固定嵌入图像:)

【解决方案1】：

删除 li 标签上的浮动，并在#navigation 上添加text-align: center;。您的浮动使您的父母的高度为 0，这反过来又不允许您拥有边界。这解决了这两个问题。从那里，只需将 border-top: 1px solid white; border-bottom: 1px solid white; 添加到您的 ul 即可获得您的台词。

【讨论】：

另外，移除 ul 上的 100% 宽度，并将其显示设置为 inline-block，这样它就不会填满整个父容器。
如此接近.. 现在一切都居中，但是，它不在一条线上。
抱歉，请将display:inline-block 添加到您的 li 标签中。
好的，最后一个问题是线条不必是 100% 宽度。它们需要以最后一个菜单项结束。可以修复吗？
是的，这是第一条评论。去掉ul上100%的宽度，设置显示为inline-block。

【解决方案2】：

看看这个小提琴http://jsfiddle.net/qZTAt/

关键是这段代码：

nav {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    margin: 0 15%;
    text-align: center;
}

【讨论】：

仍然不会自动执行.. 这是设置边距与自动边距。
那你在找什么？您是否希望导航链接与最后一个和第一个与边框的结束和开始对齐（分别）均匀分隔？
@DrDavid 你见过小提琴吗？
呵呵.. jsfiddle 看起来很酷.. 可能不得不玩它！谢谢！

【解决方案3】：

尝试使用margin:0 auto; padding:0;

【讨论】：

但首先你需要定义一个宽度。 Margin 0 auto 仅适用于指定的，否则 DIV 的宽度自动为 100% 并且它已经在中心，可以这么说。

【解决方案4】：

是的，我将迟到参加这个聚会（有一个已经回答的问题！）只是为了补充我会做的事情。它基于这种技术here

http://jsfiddle.net/rabmcnab/GSSQx/

【讨论】：

【解决方案5】：

<body>
<header>
<h1 class="font"> Heading</h1>
<nav>
<ul>

<style> body {
  font-family: 'Poiret One', cursive;
  font-weight: bold;
  font-size: 20px;
}
.font {
  font-family: 'Poiret One', cursive;
}
header {
  background-color: aqua;
  padding: 40px 0px;
}
ul {
  list-style-type: none;
}
li {
  display: inline-block;
  padding: 0 40px;
  margin: 0 auto;
  text-align: center;
}
nav {
  border-top: thin solid white;
  border-bottom: thin solid white;
  width: 50%;
  margin: 0 auto;
}
h1 {
  text-align: center;
  margin-top: -10px;
  color: white;
  font: 40px/0 arial;
  padding: 40px 0;
}
li:hover {
  color: #fff;
  cursor: pointer;
}
</style>

<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">

<body>
  <header>
    <h1 class="font"> Heading</h1>
    <nav>
      <ul>
        <li>Wedding</li>
        <li>Engagement</li>
        <li>Services</li>
      </ul>
    </nav>



  </header>

</body>

</html>

    <li>Wedding</li>
    <li>Engagement</li>
    <li>Services</li>
</ul>
</nav>

【讨论】：