增加框的填充会增加

时间：2018-04-27 14:18:21

标签： html css

我正在制作一张包含一些标记的桌子，它们周围有一个盒子。当您将鼠标悬停在框上时，标记需要稍微扩大一点以显示它是否处于活动状态。这是我的代码：

.container {
  position: absolute;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  margin: 0;
}

#mark_table {
  text-align: center;
  padding: 0;
  border: 1px solid #DDDDDD;
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: 'Open Sans';
}

#mark_table tr {
  border-bottom: 1px solid #DDDDDD;
  max-height: 39px;
  height: 20px;
}

#mark_table .spacer {
  width: 100%;
}

#mark_table th {
  padding: 5px;
  vertical-align: bottom;
}

#mark_table .rotate_th {
  padding: 0;
  vertical-align: middle;
}

#mark_table .rotate {
  transform: rotate(285deg);
  padding: 0;
}

#mark_table .table_header {
  height: 60px;
  text-align: center;
}

.mark_wrapper {
  text-align: left;
}

.mark {
  background-color: #00C853;
  display: inline-block;
  margin: 5px;
  min-width: 30px;
  max-width: 30px;
  border-radius: 3px;
  text-align: center;
}

.mark:hover {
  padding: 1px;
}

.mark a {
  color: white;
  text-decoration: none;
  cursor: default;
  display: inline-block;
  margin: 5px;
}

@media screen and (max-width: 1024px) {
  body {
    position: relative;
    height: 100%;
  }
  .container {
    left: 0;
    transform: none;
    box-sizing: border-box;
    height: 100%;
    width: auto;
    padding: 2%;
  }
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">


<div class="container">
  <table id="mark_table">

    <tr class="table_header">
      <th>Vakken</th>
      <th>Cijfers</th>
      <th class="spacer"></th>
      <th class="rotate_th">
        <div class="rotate">Rapport Gem.</div>
      </th>
      <th class="rotate_th">
        <div class="rotate">Rapport Cijfer</div>
      </th>
    </tr>


    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>

    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>

    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>

    
  </table>
</div>

.mark类包含标记。正如您所看到的，每当您将鼠标悬停在其中一个上方时，其填充增加，但它会增加行的高度并将其他标记向右移动一点。

我需要行高保持不变，而其他标记要保持在同一位置。请记住，无论何时添加太多标记，都需要跳转到下一行。

我尝试在mark_wrapper中添加一个max-height，但这会阻止标记跳到下一行，并使标记仅在底部增加高度。

2 个答案:

答案 0 :(得分：1)

不添加填充，而是添加缩放效果以在悬停时标记

.mark:hover {
  transform:scale(1.1);
}


.container {
  position: absolute;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  margin: 0;
}

#mark_table {
  text-align: center;
  padding: 0;
  border: 1px solid #DDDDDD;
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: 'Open Sans';
}

#mark_table tr {
  border-bottom: 1px solid #DDDDDD;
  max-height: 39px;
  height: 20px;
}

#mark_table .spacer {
  width: 100%;
}

#mark_table th {
  padding: 5px;
  vertical-align: bottom;
}

#mark_table .rotate_th {
  padding: 0;
  vertical-align: middle;
}

#mark_table .rotate {
  transform: rotate(285deg);
  padding: 0;
}

#mark_table .table_header {
  height: 60px;
  text-align: center;
}

.mark_wrapper {
  text-align: left;
}

.mark {
  background-color: #00C853;
  display: inline-block;
  margin: 5px;
  min-width: 30px;
  max-width: 30px;
  border-radius: 3px;
  text-align: center;
}

.mark:hover {
  transform:scale(1.1);
}

.mark a {
  color: white;
  text-decoration: none;
  cursor: default;
  display: inline-block;
  margin: 5px;
}

@media screen and (max-width: 1024px) {
  body {
    position: relative;
    height: 100%;
  }
  .container {
    left: 0;
    transform: none;
    box-sizing: border-box;
    height: 100%;
    width: auto;
    padding: 2%;
  }
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">


<div class="container">
  <table id="mark_table">

    <tr class="table_header">
      <th>Vakken</th>
      <th>Cijfers</th>
      <th class="spacer"></th>
      <th class="rotate_th">
        <div class="rotate">Rapport Gem.</div>
      </th>
      <th class="rotate_th">
        <div class="rotate">Rapport Cijfer</div>
      </th>
    </tr>


    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>

    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>

    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>

    
  </table>
</div>

答案 1 :(得分：0)

我的解决方案：JSFiddle。

作为缩放标记的替代方法，您还可以在添加额外填充时删除一些边距。因此，当您添加1px额外填充时，同时删除1px边距，因此您看到标记周围的空间没有差异。 （原始边距为5px，在悬停时，顶部和底部边距将变为4px以抵消额外填充，左右边距将保持不变5px。）

.mark:hover {
  padding: 1px;
  margin: 4px 5px;
}

为了帮助整体间距/尺寸，还要添加：

* {
  box-sizing: border-box;
}

如果您想了解更多关于 box-model 及其特定用途的信息，我建议this video，这对我有很大帮助。

相关问题
最新问题