Question

如何将按钮设置为与表格单元格相同的大小，但是如何在不同的显示器分辨率下（如同一单元格）更改按钮的大小。同时正好在其上方（z-index？）。

.journal-form {
  margin: 0 0 -25px 0;
}

.journal-btn {
  border-radius: 0;
  padding: 0;
  height: 50px;
  width: 30px;
  opacity: 0.5;
}

.journal-btn-left:hover {
  background-color: #E74C3C;
}

.journal-btn-right:hover {
  background-color: #2ECC71;
}

<td>1. Иван Иванов</td>
<td class="p-0 journal-td">
  <div class="journal-grade">3</div>
  <div class="top-layer">
    <form class="form-group journal-form" action="journal-teacher.html" method="get">
      <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group container-fluid p-0" role="group" aria-label="First group">
          <button type="button" class="btn journal-btn journal-btn-left"></button>
          <button type="button" class="btn journal-btn journal-btn-right"></button>
        </div>
      </div>
    </form>
  </div>
</td>

Answer 1

您可以将按钮设置为position: absolute，并将其宽度设置为50％，如下所示：

.journal-td {
  position: relative;
}
.journal-td button {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  background: red;
}
.journal-td button.journal-btn-right {
  left: auto;
  right: 0;
  background: green;
}

JSFiddle：https://jsfiddle.net/4ejqkfow/

表格单元上方的按钮大小

1 个答案: