0

我想在这个站点上（自动）居中导航栏。另外，我需要有一个 1px 边框顶部和 1 像素边框底部，以扩展大约 70% 的导航区域。

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

屏幕

4

5 回答 5

2

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

关键是这段代码：

nav {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    margin: 0 15%;
    text-align: center;
}
于 2012-07-18T19:16:22.860 回答
2

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

于 2012-07-18T19:19:29.950 回答
1

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

于 2012-07-18T19:07:35.673 回答
0

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

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

于 2012-07-18T19:41:43.860 回答
0 
<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>

于 2016-08-31T08:52:13.657 回答