HTML Navbar：Alignment中的元素

Question

我一直在努力为学校项目创建一个网站。但是，导航栏元素不对齐。导航栏元素应该在一个乐队中，但是，它们会弹出乐队的一半。

＆＃13;

＆＃13;

a {
  background-color: #666;
  float: center;
  display: inline;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin: 0px;
  overflow: hidden;
  font-family: Arial;
  text-align: center;
}

nav {
  background-color: #666;
  color: white;
  text-decoration: none;
  text-align: center;
  height: 40px;
  margin-right: 40px;
  margin-top: 0px;
}

a:hover {
  color: #22A;
}

p {
  text-align: center;
}

＆＃13;

<div class="navbar">
  <strong>
    <p class="nav">
    <nav>
    	<a class="first-a-nav">Home</a>
    	<a class="first-a-nav">All Models</a>
    	<a class="first-a-nav">1 to 7 Series</a>
    	<a class="first-a-nav">X series</a>
    	<a class="first-a-nav">M series</a>
    	<a class="first-a-nav">BMW i</a>
    </nav>
    </p>
    </strong>
</div>

＆＃13;

＆＃13;

＆＃13;

CSS部分不能缩短，否则overflow: hidden工作正常。

总结一下：我的Nabar完全搞砸了。请帮我把它恢复正常。

Answer 1

试试这个，而不是在任何地方使用内联尝试使用内联块。

a {
  background-color: #666;
  float: center;
  display: inline-block;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin: 0px;
  overflow: hidden;
  font-family: Arial;
  text-align: center;
}

nav {
  background-color: #666;
  color: white;
  text-decoration: none;
  text-align: center;
  height: 40px;
  margin-right: 40px;
  margin-top: 0px;
}

a:hover {
  color: #22A;
}

p {
  text-align: center;
}

<div class="navbar">
  <strong>
    <p class="nav">
    <nav>
    	<a class="first-a-nav">Home</a>
    	<a class="first-a-nav">All Models</a>
    	<a class="first-a-nav">1 to 7 Series</a>
    	<a class="first-a-nav">X series</a>
    	<a class="first-a-nav">M series</a>
    	<a class="first-a-nav">BMW i</a>
    </nav>
    </p>
    </strong>
</div>

Answer 2

你想要这样。

＆＃13;

＆＃13;

a {
  background-color: #666;
  display: inline;
  padding: 11px 77px;
  font-family: Arial;
}

nav {
    display: inline;
    background-color: #666;
    color: white;
    text-decoration: none;
    text-align: center;
    height: 40px;
    margin-right: 40px;
    margin-top: 0px;
}

a:hover {
  color: #22A;
}

p {
  text-align: center;
}

＆＃13;

<div class="navbar">
  <strong>
    <p class="nav">
    <nav>
    	<a class="first-a-nav">Home</a>
    	<a class="first-a-nav">All Models</a>
    	<a class="first-a-nav">1 to 7 Series</a>
    	<a class="first-a-nav">X series</a>
    	<a class="first-a-nav">M series</a>
    	<a class="first-a-nav">BMW i</a>
    </nav>
    </p>
    </strong>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

好的，它非常简单; 去掉;来自css类background-color: #666;

的nav