Question

我正在设计我的第一个网站（对于一家初创IT支持公司），我在学习中遇到了一些问题。问题是：

当我尝试在我的导航元素周围放置一个边框时，它会将导航框向下移动到它仍在左侧的位置，但在网页的主（文章？）部分下方。它还使我的主标题部分周围的边框更粗（仅导航框所在的边）。
我无法让页脚与文章部分对齐（即使两者都应该与中心对齐。我怀疑页脚没有对齐，因为导航框正在改变“中心”对齐方式文章）。

P.S。我不明白为什么这篇文章被遗忘...我在其他地方找不到这个问题的答案，也不认为这是一个毫无意义的问题。

以下是我网站的jsfiddle：http://jsfiddle.net/EchoedTruth/a4CLL/

 `$` <nav style="background-color: red">
        <table> 


   <ul>
   <tr> 
   <td><li><a href="BTSMain.html"><b>Home</b> </a></li></td> 
   </tr> 
   <tr>
   <td> <li><a href="BTSServices.html"><b>Services We Offer</b></a></li>
   </td>
   </tr> 
   <tr>
   <td>
   <li><a href="BTSAboutUs.html"><b>About Our Company</b></a></li> 
   </td>
   </tr>
   <tr>
   <td>
   <li><a href="BTSTestPage.html"><b>Testing Page</b></a></li> 
   </td>
   </tr>
   <tr><td><li><a href="BTSTestPage2.html"><b>Testing Page 2</b></a></li></td></tr>

   </ul>
   </table>
    </nav>

    `$`

Answer 1

您的NAV元素中的代码是无效的HTML。

你有这个只是各种各样的错误：

<table>
<ul>
<tr> 
   <td><li><a href="BTSMain.html"><b>Home</b> </a></li></td> 
   </tr> 
   <tr>
   <td> <li><a href="BTSServices.html"><b>Services We Offer</b></a></li>
   </td>
   </tr> 
   <tr>
   <td>
   <li><a href="BTSAboutUs.html"><b>About Our Company</b></a></li> 
   </td>
   </tr>
   <tr>
   <td>
   <li><a href="BTSTestPage.html"><b>Testing Page</b></a></li> 
   </td>
   </tr>
   <tr><td><li><a href="BTSTestPage2.html"><b>Testing Page 2</b></a></li></td></tr>

   </ul>
   </table>

尝试将其更改为：

<nav>
  <ul>
    <li><a href="BTSMain.html">Home</a></li>
    <li><a href="BTSServices.html">Services We Offer</a></li>
    <li><a href="BTSAboutUs.html">About Our Company</a></li> 
    <li><a href="BTSTestPage.html">Testing Page</a></li> 
    <li><a href="BTSTestPage2.html">Testing Page 2</a></li>
  </ul>
</nav>

添加边框时NAV元素移动到位的原因可能是因为添加边框会使NAV元素的宽度更大。

例如，如果您的NAV元素宽度为300px，并且您给它一个1px的边框，这将使NAv元素为302px。

阅读HTML Box模型以更好地理解这一点。

Answer 2

您的HTML结构不正确，<li>中有<table>个？ <li>元素仅允许使用<ul>或<ol>个元素。因此，在尝试设置样式之前，我会首先修复导航：

CSS：

ul {
    border:1px solid #000; // border around all li elements
}

ul li {
   border:1px solid #666; // border around each li element
}

HTML：

<nav style="background-color:red;">
    <ul>
        <li><a href="BTSMain.html"><b>Home</b></a></li>
        <li><a href="BTSServices.html"><b>Services We Offer</b></a></li>
        <li><a href="BTSAboutUs.html"><b>About Our Company</b></a></li>
        <li><a href="BTSTestPage.html"><b>Testing Page</b></a></li>
        <li><a href="BTSTestPage2.html"><b>Testing Page 2</b></a></li>
    </ul>
</nav>

网站布局问题（HTML5）

2 个答案: