css HTML按钮不可点击

cbeh67ev 于 2023-06-25 发布在其他

关注(0)|答案(3)|浏览(168)

我有一组用于计算器应用程序的具有属性的按钮。当CSS关闭时，它们是可点击的，这里是相关的代码位。目前，这些按钮不能以任何方式点击。任何帮助为什么他们不是将是伟大的

.grid {
  display: grid;
  align-content: center;
  justify-content: center;
  min-height: 100%;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

.grid>button {
  font-size: 30px;
  border: 1px solid white;
}

.outputD {
  grid-column: 1/ -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: column;
  padding: 10px;
  word-wrap: break-word;
  word-break: break-all;
  background-color: lightgray;
}

.outputD .curDisplayed {
  font-size: 2%;
  color: black;
}

.double {
  grid-column: span 2;
}

<div class="grid">
  <div class="outputD">
    <div data-cD class="curDisplayed"></div>
    <div data-pD class="prevDisplayed"></div>
  </div>
  <button data-operation class="double">AC</button>
  <button data-delete>DEL</button>
  <button data-number>1</button>
  <button data-number>2</button>
  <button data-number>3</button>
  <button data-number>4</button>
  <button data-number>5</button>
  <button data-number>6</button>
  <button data-number>7</button>
  <button data-number>8</button>
  <button data-number>9</button>
  <button data-number>0</button>
  <button data-number>.</button>
  <button data-operation>+</button>
  <button data-operation>-</button>
  <button data-operation>*</button>
  <button data-operation>/</button>
  <button data-operation class="double">=</button>
</div>

css

来源：https://stackoverflow.com/questions/70934960/html-buttons-not-clickable

3条答案

按热度按时间

7ivaypg91#

我的问题是按钮周围的CSS边框.....我用border-top替换了边框：4px固体#0169AD;正如另一篇堆栈溢出文章所建议的那样，它解决了我的问题（参考：Button is unclickable）。我仍然不知道为什么这会起作用，但它确实如此。现在我的按钮是可点击的。
我在使用计算器应用程序时也遇到了同样的问题。在我开始添加JavaScript之前，我注意到我的按钮是不可点击的。然后，我在计算器容器div之外添加了一个按钮，其余的按钮都包含在其中，它工作得很好（只是不是计算器容器内的按钮）。我还注意到，当我关闭CSS中按钮的边框时，所有按钮似乎都能像预期的那样正常工作。所以边界是问题所在（我试图改变边界的z索引来保持它，但它没有工作）。我会继续研究为什么边境会这样做，以及我能做些什么。
这是我的原始代码：

* {
  box-sizing: border-box;
}

body {
  width: 19%;
  max-width: 700px;
  margin: 6em auto;
}

.white {
  color: white;
}

button {
  text-align: center;
  padding: 30px;
  font-size: 28px;
  font-weight: bold;
  color: black;
}

div:nth-child(1) {
  text-align: end;
  color: white;
  font-size: 38px;
  padding: 30px 10px;
}

.border {
  border: 1px solid black;
}

.calculator {
  display: grid;
  grid-template-areas:
    "output output output output"
    "clear clear backspace divide"
    "seven eight nine multiply"
    "four five six subtract"
    "one two three add"
    "zero zero zero equal";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 90px 90px 90px 90px 90px 90px;
}

.output {
  grid-area: output;
  background-color: black;
}

.clear {
  grid-area: clear;
  background-color: #d8d9db;
}

.backspace {
  grid-area: backspace;
  background-color: #d8d9db;
}

.divide {
  grid-area: divide;
  background-color: #df974c;
}

.multiply {
  grid-area: multiply;
  background-color: #df974c;
  padding: 10px;
}

.subtract {
  grid-area: subtract;
  background-color: #df974c;
}

.add {
  grid-area: add;
  background-color: #df974c;
}

.equal {
  grid-area: equal;
  background-color: #df974c;
}

.zero {
  grid-area: zero;
  background-color: #d8d9db;
}

.one {
  grid-area: one;
  background-color: #d8d9db;
}

.two {
  grid-area: two;
  background-color: #d8d9db;
}

.three {
  grid-area: three;
  background-color: #d8d9db;
}

.four {
  grid-area: four;
  background-color: #d8d9db;
}

.five {
  grid-area: five;
  background-color: #d8d9db;
}

.six {
  grid-area: six;
  background-color: #d8d9db;
}

.seven {
  grid-area: seven;
  background-color: #d8d9db;
}

.eight {
  grid-area: eight;
  background-color: #d8d9db;
}

.nine {
  grid-area: nine;
  background-color: #d8d9db;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script src="app.js" defer></script>
    <title>Calculator App</title>
  </head>
  <body>
    <div class="calculator">
      <!-- Row 1 -->
      <div class="output">0</div>
      <!-- Row 2 -->
      <button class="clear border">C</button>
      <button class="backspace border">BS</button>
      <button class="divide border white">/</button>
      <!-- Row 3 -->
      <button class="seven border">7</button>
      <button class="eight border">8</button>
      <button class="nine border">9</button>
      <button class="multiply border white">x</button>
      <!-- Row 4 -->
      <button class="four border">4</button>
      <button class="five border">5</button>
      <button class="six border">6</button>
      <button class="subtract border white">-</button>
      <!-- Row 5 -->
      <button class="one border">1</button>
      <button class="two border">2</button>
      <button class="three border">3</button>
      <button class="add border white">+</button>
      <!-- Row 6 -->
      <button class="zero border">0</button>
      <button class="equal border white">=</button>
    </div>
    <button class="random">Click</button>
  </body>
</html>

赞(0）回复(0）举报 2023-06-25

apeeds0o2#

这是因为你给的边框是白色的，这不像你的按钮是不可点击的，尝试删除“边框：1 px纯白色;“从css .grid>按钮

赞(0）回复(0）举报 2023-06-25

sgtfey8w3#

.grid {
  display: grid;
  align-content: center;
  justify-content: center;
  min-height: 100%;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

.grid>button {
  font-size: 30px;
  border: 1px solid white;
}
.grid>button:hover {
  background-color:lightgray;/*effect*/
}

.outputD {
  grid-column: 1/ -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: column;
  padding: 10px;
  word-wrap: break-word;
  word-break: break-all;
  background-color: lightgray;
}

.outputD .curDisplayed {
  font-size: 2%;
  color: black;
}

.double {
  grid-column: span 2;
}

<div class="grid">
  <div class="outputD">
    <div data-cD class="curDisplayed"></div>
    <div data-pD class="prevDisplayed"></div>
  </div>
  <button data-operation class="double">AC</button>
  <button data-delete>DEL</button>
  <button data-number>1</button>
  <button data-number>2</button>
  <button data-number>3</button>
  <button data-number>4</button>
  <button data-number>5</button>
  <button data-number>6</button>
  <button data-number>7</button>
  <button data-number>8</button>
  <button data-number>9</button>
  <button data-number>0</button>
  <button data-number>.</button>
  <button data-operation>+</button>
  <button data-operation>-</button>
  <button data-operation>*</button>
  <button data-operation>/</button>
  <button data-operation class="double" onclick="console.log('working');">=</button>
</div>

一切正常
尝试单击=按钮，
它将登录控制台。

编辑：增加悬停时点击的效果**

赞(0）回复(0）举报 2023-06-25

我来回答

css HTML按钮不可点击

3条答案

相关问题

热门标签

最新问答