-2

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

  1. 当我尝试在导航元素周围放置边框时，它将导航框向下移动到它仍然在左侧的位置，但在网页的主要（文章？）部分下方。它还使我的主要标题部分周围的边框更厚（仅导航框所在的一侧）。

  2. 我无法让页脚与文章部分对齐（即使两者都应该与中心对齐。我怀疑页脚没有对齐，因为导航框正在改变文章的“中心”对齐方式）。

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

这是我网站的 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>

    `$`
4

2 回答 2

2

您的 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 Model 以更好地理解这一点。

于 2013-01-28T17:10:15.410 回答
0

您的 HTML 结构不正确，您<li>在<table>? <li>元素只能与 a<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>
于 2013-01-28T17:12:51.547 回答