Question

我想（自动）this site上的导航栏居中。此外，我需要一个1px的border-top和1px border-bottom，大约占导航区域的70％。

一旦完成，它应该看起来像这个模型：

screen

Answer 1

关键是这段代码：

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

Answer 2

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

Answer 3

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

Answer 4

是的，我会迟到这个派对（已经回答了问题！）只是为了补充我本来会做的事情。它基于这种技术here

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

Answer 5

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

5 个答案: