为什么我的<nav>按钮会向左对齐?

时间:2019-03-31 06:38:09

标签: html css

我尝试对text-align:centernavul使用li,但是它们没有使按钮在视口中居中的作用。我也尝试过nav {text-align: left;}。不起作用。

CSS代码:

  #container {
      width: 100%;
      background-color: black;
      margin-left: auto;
      margin-right: auto;}

 main {
        background-color: rgb(225, 234, 234);
        display: block;
        border-radius: 2em;
        border-top: medium solid powderblue;
        border-bottom:  medium solid powderblue;
        margin-left:  0.8em;
        margin-right: 0.8em;
        padding-top: 1em;
        padding-right: 0.5em;
        padding-bottom: 1em;
        padding-left: 0.5em;}

 .equip {
          width: 100%;
          margin-left: auto;
          margin-right: auto;}

 h1 {
    color: powderblue;
    text-align: center;
    font-size: 1.7em;
    font-family: cursive,fantasy,"Times New Roman";
    font-style: italic;
    white-space: nowrap;}


 nav ul {
          list-style-type: none;
          border-radius: 2em;}

 nav ul li { 
            text-align: center;
            padding-bottom: 0.3em;
            padding-top: 0.3em;
            border-color: powderblue;
            background-color: grey;
            margin-bottom: 0.5em;
            margin-top: 0.5em;
            border-radius: 3em;}

 nav a {
        color: white;
        font-family: "Times New Roman";
        font-size: 1.3em;
        white-space: nowrap;
        text-decoration: none;}


footer {
          margin-top: 1em;
          padding-bottom: 1em;
          text-align: center;
          font-size: 0.8em;
          color: white;}
  1. HTML代码:

<!DOCTYPE html>
    <html lang="en-us">
    <head>
    <title>FFC|Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheet.css">
    </head>
    
    
    <body>
    
    
    <div id="container">
    
    <header>
    
            <img  class="equip" src="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML Learn\Step-by-Step Guide\Forward Fitness Club\images\fitness club logo_grey_background.jpg"
    
                    alt="Forward Fitness Club ">
    
                 <h1>
                       Forward Fitness Club
                  </h1>
    
    </header>
    
    <nav>
            <ul>
                  <li> <a href="About Us.html"> About Us </a> </li>
                  <li> <a href="Classes.html"> Classes </a></li>
                  <li> <a href="About Us.html"> About Us </a></li>
                  <li> <a href="Nutrition.html"> Nutrition </a></li>
                  <li> <a href="Contact Us.html"> Contact Us </a></li>
    
            </ul>
    
    </nav>

    <main>
    
           <p>Welcome to Forward Fitness Club. Our mission is to help our clients meet their fitness <b>AND</b> nutrition goals. <br>   </p> <!--<span style="font-weight: bold"> </span>-->
    
            <h2>  FREE ONE-WEEK TRIAL MEMBERSHIP</h2>
    
    
               <a href="Contact Us.html">Call Us today to Get Started</a> <br>
    
    
                  <h3>Fitness Club Hours</h3>
    
    <p>
    
    <ul style="list-style-type:none">
      <li style="text-align:left"> Monday-Thursday: 6:00am - 6:00pm</li>
      <li> Friday: 6:00am - 4:00pm</li>
      <li> Saturday: 8:00am - 6:00pm</li>
      <li> Sunday: Closed</li>
    </ul>
    
    </p>
    
    
    </main>
    
    <footer >
    
    <address>
               Copyright 2015. All Rights Reserved.<br>
    
             <a style="color:powderblue" href="ghanesh.t@gmail.com">forwardfitnessclub@gmail.com</a>
    
    </address>
    
    </footer>
    
    </div>
    
    </body>
    </html>

图片1:Samsung Galaxy Note 2视口

图片2:桌面浏览器视口

Samsung Galaxy Note 2 browser viewport

Desktop browser viewport

3 个答案:

答案 0 :(得分:3)

ul列表的左侧有一些默认填充。尝试为text-align: center设置padding-left: 0 nav ul

#container {
  width: 100%;
  background-color: black;
  margin-left: auto;
  margin-right: auto;
}

main {
  background-color: rgb(225, 234, 234);
  display: block;
  border-radius: 2em;
  border-top: medium solid powderblue;
  border-bottom: medium solid powderblue;
  margin-left: 0.8em;
  margin-right: 0.8em;
  padding-top: 1em;
  padding-right: 0.5em;
  padding-bottom: 1em;
  padding-left: 0.5em;
}

.equip {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

h1 {
  color: powderblue;
  text-align: center;
  font-size: 1.7em;
  font-family: cursive, fantasy, "Times New Roman";
  font-style: italic;
  white-space: nowrap;
}

nav ul {
  text-align: center;
  padding-left: 0;
  list-style-type: none;
  border-radius: 2em;
}

nav ul li {
  text-align: center;
  padding-bottom: 0.3em;
  padding-top: 0.3em;
  border-color: powderblue;
  background-color: grey;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  border-radius: 3em;
}

nav a {
  color: white;
  font-family: "Times New Roman";
  font-size: 1.3em;
  white-space: nowrap;
  text-decoration: none;
}

footer {
  margin-top: 1em;
  padding-bottom: 1em;
  text-align: center;
  font-size: 0.8em;
  color: white;
}
<!DOCTYPE html>
<html lang="en-us">

<head>
  <title>FFC|Home</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <link rel="stylesheet" href="stylesheet.css">
</head>


<body>


  <div id="container">

    <header>

      <img class="equip" src="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML Learn\Step-by-Step Guide\Forward Fitness Club\images\fitness club logo_grey_background.jpg" alt="Forward Fitness Club ">

      <h1>
        Forward Fitness Club
      </h1>

    </header>

    <nav>
      <ul>
        <li> <a href="About Us.html"> About Us </a> </li>
        <li> <a href="Classes.html"> Classes </a></li>
        <li> <a href="About Us.html"> About Us </a></li>
        <li> <a href="Nutrition.html"> Nutrition </a></li>
        <li> <a href="Contact Us.html"> Contact Us </a></li>

      </ul>

    </nav>

    <main>

      <p>Welcome to Forward Fitness Club. Our mission is to help our clients meet their fitness <b>AND</b> nutrition goals. <br> </p>
      <!--<span style="font-weight: bold"> </span>-->

      <h2> FREE ONE-WEEK TRIAL MEMBERSHIP</h2>


      <a href="Contact Us.html">Call Us today to Get Started</a> <br>


      <h3>Fitness Club Hours</h3>

      <p>

        <ul style="list-style-type:none">
          <li style="text-align:left"> Monday-Thursday: 6:00am - 6:00pm</li>
          <li> Friday: 6:00am - 4:00pm</li>
          <li> Saturday: 8:00am - 6:00pm</li>
          <li> Sunday: Closed</li>
        </ul>

      </p>


    </main>

    <footer>

      <address>
               Copyright 2015. All Rights Reserved.<br>
    
             <a style="color:powderblue" href="ghanesh.t@gmail.com">forwardfitnessclub@gmail.com</a>
    
    </address>

    </footer>

  </div>

</body>

</html>

答案 1 :(得分:1)

如果您将其设置为nav { text-align: center;}

,则可以使用

 #container {
      width: 100%;
      background-color: black;
      margin-left: auto;
      margin-right: auto;}

 main {
        background-color: rgb(225, 234, 234);
        display: block;
        border-radius: 2em;
        border-top: medium solid powderblue;
        border-bottom:  medium solid powderblue;
        margin-left:  0.8em;
        margin-right: 0.8em;
        padding-top: 1em;
        padding-right: 0.5em;
        padding-bottom: 1em;
        padding-left: 0.5em;}

 .equip {
          width: 100%;
          margin-left: auto;
          margin-right: auto;}

 h1 {
    color: powderblue;
    text-align: center;
    font-size: 1.7em;
    font-family: cursive,fantasy,"Times New Roman";
    font-style: italic;
    white-space: nowrap;}


 nav ul {
          list-style-type: none;
          border-radius: 2em;}
          
          nav {  text-align: center;}
         main{  text-align: center;}
         address{  text-align: center;}
<!DOCTYPE html>
    <html lang="en-us">
    <head>
    <title>FFC|Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheet.css">
    </head>
    
    
    <body>
    
    
    <div id="container">
    
    <header>
    
            <img  class="equip" src="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML Learn\Step-by-Step Guide\Forward Fitness Club\images\fitness club logo_grey_background.jpg"
    
                    alt="Forward Fitness Club ">
    
                 <h1>
                       Forward Fitness Club
                  </h1>
    
    </header>
    
    <nav>
            <ul>
                  <li> <a href="About Us.html"> About Us </a> </li>
                  <li> <a href="Classes.html"> Classes </a></li>
                  <li> <a href="About Us.html"> About Us </a></li>
                  <li> <a href="Nutrition.html"> Nutrition </a></li>
                  <li> <a href="Contact Us.html"> Contact Us </a></li>
    
            </ul>
    
    </nav>

    <main>
    
           <p>Welcome to Forward Fitness Club. Our mission is to help our clients meet their fitness <b>AND</b> nutrition goals. <br>   </p> <!--<span style="font-weight: bold"> </span>-->
    
            <h2>  FREE ONE-WEEK TRIAL MEMBERSHIP</h2>
    
    
               <a href="Contact Us.html">Call Us today to Get Started</a> <br>
    
    
                  <h3>Fitness Club Hours</h3>
    
    <p>
    
    <ul style="list-style-type:none">
      <li style="text-align:center"> Monday-Thursday: 6:00am - 6:00pm</li>
      <li> Friday: 6:00am - 4:00pm</li>
      <li> Saturday: 8:00am - 6:00pm</li>
      <li> Sunday: Closed</li>
    </ul>
    
    </p>
    
    
    </main>
    
    <footer >
    
    <address>
               Copyright 2015. All Rights Reserved.<br>
    
             <a style="color:powderblue" href="ghanesh.t@gmail.com">forwardfitnessclub@gmail.com</a>
    
    </address>
    
    </footer>
    
    </div>
    
    </body>
    </html>

答案 2 :(得分:1)

有时,浏览器会应用默认的用户样式表,如果您错过了课堂上要提及的常见样式。

我给出的示例enter image description here

enter image description here

所以我的解决方案是,尝试在代码中添加填充

padding: 0px