按钮边框问题

Question

我是前端新手，我一直在尝试设计一个计算器。我使用 table 因为我认为这是最好的选择。我使用了 <button> 元素以使其可点击，但是当我使用属性（ border: none 或 0）时它不再可点击，那是什么原因造成的？

另外我想知道如何更改按钮背景（我尝试继承它并且有效但我认为这不实用）。

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  /* padding: 0; */
  /* margin: 0 auto; */
  font-size: 2rem;
  /* text-align: center; */
  background-color: #d8d9db;
}

.wrapper {
  width: 400px;
  text-align: center;
  margin: 0 auto;
  padding: 0%;
  background-color: black;
}

.screen {
  padding: 1rem;
  background-color: black;
  color: white;
  text-align: right;
}

tr {
  border: 8px solid black;
  text-align: center;
}

td {
  /* border: 5px solid red; */
  background-color: #d8d9db;
  width: 100px;
  text-align: center;
  margin: 0.5rem;
}

button {
  font-size: 3rem;
  color: black;
  border: 0;
  margin: 0;
  background-color: inherit;
  font-weight: bold;
}

.col4 {
  background-color: #df974c;
  color: white;
  width: 25%;
}

.col4 button {
  color: white;
  padding: 1rem;
}

.butc {
  width: 50%;
  background-color: #d8d9db;
  padding: 1rem;
}

.but0 {
  width: 75%;
  background-color: #d8d9db;
  padding: 1rem;
}

<div class="wrapper">
  <section class="screen">0</section>
  <section class="calc-buttons">
    <table>
      <tbody>
        <tr>
          <td colspan="2" class="butc"><button>C</button></td>
          <td class="numbs"><button>&larr;</button></td>
          <td class="col4"><button>&divide;</button></td>
        </tr>
        <tr>
          <td class="numbs"><button>7</button></td>
          <td class="numbs"><button>8</button></td>
          <td class="numbs"><button>9</button></td>
          <td class="col4"><button>&times;</button></td>
        </tr>
        <tr>
          <td class="numbs"><button>4</button></td>
          <td class="numbs"><button>5</button></td>
          <td class="numbs"><button>6</button></td>
          <td class="col4"><button>&minus;</button></td>
        </tr>
        <tr>
          <td class="numbs"><button>1</button></td>
          <td class="numbs"><button>2</button></td>
          <td class="numbs"><button>3</button></td>
          <td class="col4"><button>&plus;</button></td>
        </tr>
        <tr>
          <td colspan="3" class="but0"><button>0</button></td>
          <td class="col4"><button>&equals;</button></td>
        </tr>
      </tbody>
    </table>
  </section>
</div>

Answer 1

按钮的默认活动状态取决于 border 当将按钮的边框设置为 none 时，这意味着 :active 中设置的 border-style 将不起作用。

因此，为了去除边框但保留可点击效果，您需要在 css

中添加类似的内容

button:active{
    border: 1px inset black
}

并考虑指定不同的按钮宽度和高度以匹配计算器样式，这将有助于它们的背景颜色

按钮边框问题

Button Borders Issue

html

css

html-table

button