Question

我在这里有一个小例子来学习HTML。

这是HTML部分：

    <!-- header open -->
 <header role="banner">
 <h1>Beispielaufgaben zu HTML5<br>und CSS3</h1>
  <nav class="clearfix">
    <ul>
      <li><a href="home.html">HOME</a></li>
      <li><a href="html.html">HTML</a></li>
      <li><a href="css.html">CSS</a></li>
    </ul>
  </nav>
 </header>
<!-- header close -->

这是CSS部分：

html {
    margin:0;
    pading:0;
}
.wrapper {
    width:90%;
    max-width:1500px;
    margin-top:2%;
    margin-left:auto;
    margin-right:auto;
    }
header h1 {
    font-size:350%;
    text-align:center;
    background-color:#999;
    }
nav ul li {
    background-color:#CCC;
    display:block;
    float:left;
    width:20%;
    font-size:200%;
    text-align:center;
    }
}

我希望导航以h1为中心，但我没有使用一堆测试方法......

有谁知道解决方案？

Answer 1

我对 CSS 进行了一些更改，现在应该按照您的要求进行操作：

html {
    margin:0;
    pading:0;
}
.wrapper {
    width:90%;
    max-width:1500px;
    margin-top:2%;
    margin-left:auto;
    margin-right:auto;
    }
header h1 {
    font-size:350%;
    text-align:center;
    background-color:#999;
    }
nav ul li {
    background-color:#CCC;
    display:block; /*Changed to display: inline-block to replace float*/
    float:left; /*Removed because would interfere with added text-align on nav*/
    width:20%;
    font-size:200%;
    text-align:center; /*Removed because not needed*/
    }
} /*Removed random closing curly bracket*/
nav {
    text-align: center; /*Added to align all <li> in center*/
}

小提琴：http://jsfiddle.net/U6Khy/1/

使用对齐导航：中心

1 个答案: