Question

我使用表制作了一个日历，其中的HTML如下：

[...]
<tr>
    <td><span id = "0">00</span></td>
    <td><span id = "1">01</span></td>
    <td><span id = "2">02</span></td>
    <td><span id = "3">03</span></td>
    <td><span id = "4">04</span></td>
    <td><span id = "5">05</span></td>
    <td><span id = "6">06</span></td>
</tr>
<tr>
    <td><span id = "7">07</span></td>
    <td><span id = "8">08</span></td>
    <td><span id = "9">09</span></td>
    <td><span id = "10">10</span></td>
    <td><span id = "11">11</span></td>
    <td><span id = "12">12</span></td>
    <td><span id = "13">13</span></td>
</tr>
[...]

现在，重点是，我想对我的span元素给出悬停效果。为此我需要span来占用父td的所有空间并且水平和垂直居中。我做了一些谷歌搜索，但似乎没有任何工作。我希望我的情况清楚。如何使跨度占用td的所有空间，以便悬停产生所需的效果，或者我应该使用div而不是span（如果这可能会减轻我的方式），或者存在任何其他解决方法来产生悬停效果。

提前致谢!!

CSS：

 .cal1 .clndr span {
     color: #3a3b36;
     font-size: 15px;
     display: inline-block;
 }

 td {
     vertical-align: middle;
     border: 1px solid black;
     text-align: center;
     white-space: nowrap;
 }

Answer 1

您可以从height元素继承td并将范围display属性设置为block，同时添加line-height将处理垂直问题定心。

这是一个例子

＆＃13;

td {
  width: 64px;
  height: 64px;
  vertical-align: middle;
  border: 1px solid black;
  text-align: center;
  white-space: nowrap;
}

td span {
  color: #3a3b36;
  background-color: white;
  font-size: 15px;
  display: block;
  height: inherit;
  line-height: 64px;
  cursor: pointer;
  transition: all 0.4s linear;
}

td span:hover {
  background-color: red;
  color: white;
}

＆＃13;

<table>
  <tr>
    <td><span id = "0">00</span></td>
    <td><span id = "1">01</span></td>
    <td><span id = "2">02</span></td>
    <td><span id = "3">03</span></td>
    <td><span id = "4">04</span></td>
    <td><span id = "5">05</span></td>
    <td><span id = "6">06</span></td>
  </tr>

  <tr>
    <td><span id = "7">07</span></td>
    <td><span id = "8">08</span></td>
    <td><span id = "9">09</span></td>
    <td><span id = "10">10</span></td>
    <td><span id = "11">11</span></td>
    <td><span id = "12">12</span></td>
    <td><span id = "13">13</span></td>
  </tr>
</table>

＆＃13;

Answer 2

正如@Deepak在评论中建议的那样，为什么不取消跨度并使用tds呢？

就这样......

<tr>
    <td>00</td>
    <td>01</td>
    <td>02</td>
    <td>03</td>
    <td>04</td>
    <td>05</td>
    <td>06</td>
</tr>

然后设置样式：

td:hover {
    background: #f00;
}

至于为什么它们不会填充，默认情况下，跨度是您的声明（display:inline-block;）内联元素。 Div是块级元素，因此您在询问这是否更合适时是正确的。因此，您可以将css更改为display: block;或使用div。

然后使用width: 100%;和height: 100%设置样式，以达到您想要的效果。

修改

抱歉，默认情况下跨度为display:inline;。在这种情况下，您对display:inline-block的声明已经与display:block相同。无论是使用display:inline-block还是display:block，vertical-align都不起作用（请参阅http://phrogz.net/css/vertical-align/），所以要么省略像我说的span元素，要么如果你是的话请参阅DavidDomain的答案好吧，你的细胞是固定大小的。

跨越占据所有空间并水平和垂直居中

2 个答案: