Question

我目前正试图将我的导航栏放在我的网站上。我尝试了几种不同的方法来做到这一切都失败了。我相信我的代码可能有问题...如果这会产生影响，我目前还没有使用IDE记事本。

以下是代码：

ul#list-nav {
  list-style: none;
  margin-left: -540 auto;
  padding: 720;
  width: 1040;
}
ul#list-nav li {
  display: inline
}
ul#list-nav li a {
  text-decoration: none;
  padding: 5px 0;
  width: 100px;
  background: #F7819F;
  color: #DF013A;
  float: left;
  text-align: center;
  border-left: 1px solid #ffffff;
}
ul#list-nav li a:hover {
  background: #DF01A5;
  color: #DF01A5;
}
div#nav {
  text-align: center;
  text-shadow: 2px 2px 8px #FF0000;
}
div#nav ul {
  display: inline-block;
  border-radius: 25px;
}

<ul id="list-nav">
  <li><a href="index.html">Home</a></li>
  <li><a href="bio.htm">Biography</a></li>
  <li><a href="career.htm">Career</a></li>
  <li><a href="links.htm">Links</a></li>
  <li><a href="contact.htm">Contact</a></li>
  <li><a href="tutorial.htm">Tutorial</a><li>
</ul>

Answer 1

解决方案很简单。您可以使用margin: 0 auto;来定位导航。这是解决方案：

＆＃13;

ul#list-nav {
  list-style:none; 
  margin: 0 auto; /* notice the code here */
  width: 610px; /* notice the code here */
}

ul#list-nav li { 
  display: inline }  

ul#list-nav li a { 
  text-decoration:none;
  padding:5px 0; width:100px;
  background:#F7819F; 
  color:#DF013A; float: left;
  text-align:center; 
  border-left:1px solid #ffffff; }  

ul#list-nav li a:hover {
  background:#DF01A5; 
  color:#DF01A5; } 

div#nav{
  text-align: 
  center; 
  text-shadow: 2px 2px 8px #FF0000;
}
div#nav ul{
  display: inline-block; 
  border-radius: 25px;}

＆＃13;

<ul id="list-nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="bio.htm">Biography</a></li>
      <li><a href="career.htm">Career</a></li>
      <li><a href="links.htm">Links</a></li>
      <li><a href="contact.htm">Contact</a></li>
      <li><a href="tutorial.htm">Tutorial</a><li>
</ul>

＆＃13;

Answer 2

你的问题在这里

ul#list-nav {
  list-style:none; 
  margin-left: -540 auto; 
  padding:720;
  width: 1040;
}

长度始终需要一个单位才能工作（除非值为0），否则浏览器不会处理它。

此外，您正在使用margin-left的简写，如果您想缩短属性，请使用margin

了解速记的工作原理here

所以，考虑一下我认为你使用px（像素），

的价值观

这里是你如何将导航栏放在中心

ul#list-nav {
  list-style:none; 
  margin:0 auto; 
  width: 1040px;
}

Answer 3

我们一直都在你的鞋子里，这是第一个让导航栏居中的繁琐工程......我记得那些日子！幸运的是，一旦你开始理解浏览器如何将元素呈现给DOM，这是一件非常容易的事情。

首先，我们需要定义某种容器元素，你可以使用body，但我通常会定义一个额外的＆＃34;包装器＆＃34;抓住我的元素。

＆＃13;

#navWrapper {
        width: 100%;
        height: 75px;
    }

    #navContainer {
        width: 200px;
        height: 75px;
        background: black;
        margin: 0 auto;
    }

＆＃13;

<div id="navWrapper">
         <div id="navContainer">
              <nav>...</nav>
         </div> 
    </div>

＆＃13;

现在让我们设置样式，首先我们希望我们的包装器填充100％的视口，然后我们希望我们的导航容器位于屏幕的中心。为此，我们可以允许浏览器使用margin:0 auto来计算左/右偏移，与您在上面设置绝对值时所做的相反（这通常是跨平台兼容性的不良做法）。 / p>

所以整个css：

#navWrapper {
    width: 100%;
    height: 75px;
}

#navContainer {
    width: 1024px;
    height: 75px;
    background: black;
    margin: 0 auto;
}

随意更改这些值，我希望这有助于您理解！

Answer 4

您可以使用

ul#list-nav {
  text-align: center;
}
ul#list-nav > li { 
  display: inline-block;
}

你也可以删除无用的花车。

＆＃13;

ul#list-nav {
  list-style: none;
  padding: 0;
  text-align: center;
}
ul#list-nav > li {
  display: inline-block;
}
ul#list-nav > li > a {
  text-decoration: none;
  display: inline-block;
  padding: 5px 0;
  width: 100px;
  background: #F7819F;
  color: #DF013A;
}
ul#list-nav > li > a:hover {
  background: #DF01A5;
  color: #DF01A5;
}

＆＃13;

<ul id="list-nav">
  <li><a href="index.html">Home</a></li>
  <li><a href="bio.htm">Biography</a></li>
  <li><a href="career.htm">Career</a></li>
  <li><a href="links.htm">Links</a></li>
  <li><a href="contact.htm">Contact</a></li>
  <li><a href="tutorial.htm">Tutorial</a><li>
</ul>

＆＃13;

Answer 5

add this property  margin-left:25% and margin-right:25% to the **ul#list-nav**  itz works for all viewport Try this.

＆＃13;

ul#list-nav {
  list-style: none;
 margin-left:25%;
 margin-right:25%;

  padding: 720;
  width: 1040;
}
ul#list-nav li {
  display: inline
}
ul#list-nav li a {
  text-decoration: none;
  padding: 5px 0;
  width: 100px;
  background: #F7819F;
  color: #DF013A;
  float: left;
  text-align: center;
  border-left: 1px solid #ffffff;
}
ul#list-nav li a:hover {
  background: #DF01A5;
  color: #DF01A5;
}
div#nav {
  text-align: center;
  text-shadow: 2px 2px 8px #FF0000;
}
div#nav ul {
  display: inline-block;
  border-radius: 25px;
}

＆＃13;

<ul id="list-nav">
  <li><a href="index.html">Home</a></li>
  <li><a href="bio.htm">Biography</a></li>
  <li><a href="career.htm">Career</a></li>
  <li><a href="links.htm">Links</a></li>
  <li><a href="contact.htm">Contact</a></li>
  <li><a href="tutorial.htm">Tutorial</a><li>
</ul>

＆＃13;

居中导航栏

5 个答案: