Question

我正在使用标准的CSS / HTML来设计我的网站。使用表格进行导航，我指定宽度为"#nav table"的{{1}}和宽度为100%的{{1}}。

我的问题是它实际上并没有按照我的定义来设置自己。我曾认为它就像简单地说"#nav th"一样简单，但即使我将其定义为50px，它仍然保留在height: 50px在HTML中，我确定了我的单元格，表格是什么，等等

我该如何解决这个问题？现在我的网站标题非常大，因为我的表格单元格不会调整到我定义它们的位置。

仅使用PHP，HTML和CSS。

CSS：

0px

HTML：

90.5px.

Answer 1

使用代码#nav table假设一个元素具有ID＆＃34; nav＆＃34;内部有一个表格，而不是table元素，其ID为＃34; nav＆＃34;。

<style type="text/css">
  /* For a table with the id of 'nav'.  You could equally remove 'table'. */
  table#nav {
    margin: 15px;
    width: 100%;
    position: fixed;
  }
  #nav th {
    height: 0px;
    border: 5px black solid;
    padding:0 25px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0px;
    word-spacing: 5px;
  }
  th h1 {
    margin:0;
  }
</style>

<center>
  <table id="nav">
    <tr>
      <th><a href="LINK"><h1>LINK</h1></a></th>
      <th><a href="LINK1"><h1>LINK1</h1></a></th>
      <th><a href="LINK2"><h1>LINK2</h1></a></th>
      <th><a href="LINK3"><h1>LINK3</h1></a></th>
      <th><a href="LINK4"><h1>LINK4</h1></a></th>
      <!-- Don't forget to close all hrefs with a double-quote: -->
      <th><a href="LINK5"><h1>LINK5</h1></a></th>
    </tr>
  </table>
</center>

https://jsfiddle.net/cz1o8a2n/1/

请注意，如果th内部的元素高度为90.5像素，则无法使用CSS使表格标题更低（除非您使用CSS来降低该元素的高度））。

修改：请考虑使用更多的现代nav和list-items。此外，如果您愿意，您可以更轻松地使网站快速响应。：）

<style type="text/css">
  nav {
    margin: 15px;
    width: calc(100% - 30px);
    position: fixed;
    text-align:center;
  }
  nav ul {
    padding-left:0;
    list-style:none;
  }
  nav li {
    display:inline-block;
    border: 3px black solid;
    padding:0 20px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0px;
    word-spacing: 5px;
    margin:2px 0;
  }
</style>
<nav id="nav">
  <ul>
    <li><a href="LINK">LINK</a></li>
    <li><a href="LINK1">LINK1</a></li>
    <li><a href="LINK2">LINK2</a></li>
    <li><a href="LINK3">LINK3</a></li>
    <li><a href="LINK4">LINK4</a></li>
    <li><a href="LINK5">LINK5</a></li>
  </ul>
</nav>

https://jsfiddle.net/cz1o8a2n/2/

Answer 2

<强> HTML
你错过了LINK5的"。

<center>
    <table id="nav">
        <tr>
            <th><a href="LINK"><h1>LINK</h1></a></th>
            <th><a href="LINK1"><h1>LINK1</h1></a></th>
            <th><a href="LINK2"><h1>LINK2</h1></a></th>
            <th><a href="LINK3"><h1>LINK3</h1></a></th>
            <th><a href="LINK4"><h1>LINK4</h1></a></th>
            <th><a href="LINK5"><h1>LINK5</h1></a></th>
        </tr>
    </table>
</center>

<强> CSS
如果您要将css应用于ID设置为 nav 的表格，则您的选择器必须为table#nav。至于表格标题比你想象的要大，问题是h1标签本身就有很大的余地。这个巨大的优势使你的桌面标题比你想象的要大。

table#nav {
    margin: 15px;
    width: 100%;
    position: fixed;
}

#nav th {
    height: 50px;
    border: 5px black solid;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

#nav th h1 {
    margin: 0;
}

如何定义表格单元格高度（CSS / HTML）

2 个答案: