Html 需要帮助对齐/居中导航栏&；表格内容（CSS）

我的代码：

HTML

---

---

如果你还没有注意到的话，我最担心的是，我的主导航栏应该放在其他所有东西的上面，但它并没有在页面上居中。到目前为止，我不得不忍受的是一个半好的造型，这最终导致了我现在所拥有的。看起来我可以通过设置像素宽度来稍微调整它，但是当我尝试使用百分比时，它就消失了

第二点是我正在努力工作的内容，它包含了我的分类摘要，以及最终将承载某些其他东西（链接、图像等）的内容。我以为我可以用一张桌子来处理它，但我一辈子都不能把“抽象”（废话）的内容放在中心位置。所以，我当时做的是创建第二个表格，我想我可以调整表格两侧（左右）的边距，使之居中

它不起作用。

我目前正在使用AdobeCS6，并使用liquid grid布局启动了页面。我想关注的布局/风格，也将考虑不同的分辨率/尺寸的用户显示器。换句话说，当通过手机或平板电脑观看时，我希望它能够进行调整

请列出任何建议。说到这件事，我是一个完全的新手，所以我觉得来到这里会给我一个更好的机会去理解我做错了什么

请随意询问更多信息，但考虑到我最初的查询，我认为我目前提供的信息应该足够了

如何调整导航栏？

在考虑液体网格布局时，我是否可以保持当前元素的位置/样式，或者我必须尝试不同的路径吗？

为什么我不能在第二个表格的右边空白处添加内容，而我可以在左边添加内容？

谢谢你给我的建议

最亲切的问候

• T.R.G

---

您必须添加此类：

.clear {
  clear: both;
  float: none;
}

CSS更改：

#navbar ul {
  list-style: none;
  width: 730px;
  overflow: hidden;
  clear: right;
  float: right;
  margin: 0;
  padding: 0;
}

#navbar {
  width: auto;
  clear: right;
  float: right;
  padding: 0 0 0 0;
  background-color: #ffffff;
  border-bottom: 1px solid #2B9EFF;
}

HTML更改：

<div id="header">
<!-- Start NavBar -->
    <div id="navbar" name="nav-top">
      <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">FAQ</a></li>
      </ul> 
</div><div class="clear"></div>
  </div>

我保留了HTML的原样，但最终在CSS上使用了以下内容：

CSS

#navbar {
    width: 100%;
    /* float: none; */
    margin-bottom: 3em;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    float:none;
    background-color: #ffffff;
    border-bottom: 1px solid #2B9EFF;  }

#navbar ul {
    list-style: none;
    width: auto;/* 730px width was 800px before, but changed to slide navbar to right */
    margin:0 auto;
    padding: 0 20% 0 20%;
    overflow:hidden; }

table {
    width: 100%;
} 

#table1 th, td {
    width:auto;
    float:none;
    text-align:center;
}

#table_2 {
    width:50%;
    float:none;
    margin: 0 auto;
    text-align:justify;
}

---

现在，在我找到一种通过样式将列表扩展到整个页面的方法之前，我将一直这样做。如果您注意到，位于列表底部的边框（navbar）元素（li）会逐渐消失，并且不会跨越整个页面，这不是我想要的。从设计的角度来看，页脚本身横跨整个页面时，页面看起来不一致且前卫。所以，如果你觉得你有办法解决这个问题，请随时通知我

另外，我要感谢彼得·索姆巴蒂的贡献

虽然这最终并没有真正起到帮助作用，但他最终还是给了我一些观点，从而引出了我上面所说的。如果你注意的话，我确实采纳了他对第二张桌子（宽度）的造型建议

谢谢各位

祝你今天愉快

• T.R.G

---

它不起作用。我试着根据你的第二篇文章编辑它，并在引用你的第一篇文章后更新了我的html，但它仍然没有居中。我应该给桌子上“清除”课吗？还有，为什么没有it中心？谢谢你写的东西。我现在明白了。

<div id="header">
<!-- Start NavBar -->
    <div id="navbar" name="nav-top">
      <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">FAQ</a></li>
      </ul> 
</div><div class="clear"></div>
  </div>

#navbar {
    width: 100%;
    /* float: none; */
    margin-bottom: 3em;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    float:none;
    background-color: #ffffff;
    border-bottom: 1px solid #2B9EFF;  }

#navbar ul {
    list-style: none;
    width: auto;/* 730px width was 800px before, but changed to slide navbar to right */
    margin:0 auto;
    padding: 0 20% 0 20%;
    overflow:hidden; }

table {
    width: 100%;
} 

#table1 th, td {
    width:auto;
    float:none;
    text-align:center;
}

#table_2 {
    width:50%;
    float:none;
    margin: 0 auto;
    text-align:justify;
}