以我的网页标签为中心

Question

我正在为我的网页设计课程设计一个电视节目页面。我在我的网页中添加了选项卡，以便在教程之后作为顶部菜单使用，但是现在我甚至不知道如何使用中间标记来对选项卡进行居中。

​

    body {
      font: 0.8em arial, helvetica, sans-serif;
    }
    #header ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    #header li {
      float: right;
      border: 1px solid #bbb;
      border-bottom-width: 0;
      margin: 0;
      padding: 0;
    }
    #header a {
      text-decoration: none;
      display: block;
      background: #eee;
      padding: 0.24em 1em;
      color: #00c;
      width: 8em;
      text-align: center;
    }
    #header a:hover {
      background: #ddf;
    }
    #header #selected {
      border-color: black;
    }
    #header #selected a {
      position: relative;
      top: 1px;
      background: white;
      color: black;
      font-weight: bold;
    }
    #content {
      border: 1px solid black;
      clear: both;
      padding: 0 1em;
    }
    h1 {
      margin: 0;
      padding: 0 0 1em 0;
    }

<div id="header">
  <center>
    <ul>
      <li style="font-family: DFKai-SB;"><a href="#">Home</a>
      </li>
      <li style="font-family: DFKai-SB;"><a href="#">Shows</a>
      </li>
      <li style="font-family: DFKai-SB;"><a href="#">Classic</a>
      </li>
      <li style="font-family: DFKai-SB;"><a href="#">More</a>
      </li>
    </ul>
  </center>
</div>
<div id="content">
</div>

​

Answer 1

将带有类div的.centeer添加到选项卡中，而不是<center>：

.centeer {
    display: table;
    margin: 0px auto 0px auto;
}

现场演示

Answer 2

浮动具有更多的优先级，所以这就是为什么您的内容浮动到一边而不是对齐。在css中，li元素使用一些内联变体来避免堆叠。

​

        body {

          font: 0.8em arial, helvetica, sans-serif;

        }

       

        #header ul {

          list-style: none;

          padding: 0;

          margin: 0;

        }

        #header li {
          display: inline-flex;

          border: 1px solid #bbb;

          border-bottom-width: 0;

          margin: 0;

          padding: 0;

        }

        #header a {

          text-decoration: none;
          
          background: #eee;

          padding: 0.24em 1em;

          color: #00c;

          width: 8em;

          text-align: center;

        }

        #header a:hover {

          background: #ddf;

        }

        #header #selected {

          border-color: black;

        }

        #header #selected a {

          position: relative;

          top: 1px;

          background: white;

          color: black;

          font-weight: bold;

        }

        #content {

          border: 1px solid black;

          clear: both;

          padding: 0 1em;

        }

        h1 {

          margin: 0;

          padding: 0 0 1em 0;

        }

<div id="header">
  <center>
  <ul>
    <li style="font-family: DFKai-SB;"><a href="#">Home</a>
    </li>
    <li style="font-family: DFKai-SB;"><a href="#">Shows</a>
    </li>
    <li style="font-family: DFKai-SB;"><a href="#">Classic</a>
    </li>
    <li style="font-family: DFKai-SB;"><a href="#">More</a>
    </li>
  </ul>
    </center>
</div>
<div id="content">
</div>

​