html - 框阴影在 HTML、CSS 中无法正常工作

Question

这个问题在这里已经有了答案:





What is a clearfix?

(9 个回答)



What methods of ‘clearfix’ can I use?

(29 个回答)


去年关闭。




我用 HTML、CSS 和 JavaScript 制作了一个计算器。在计算器 (div) 元素中，我试图添加一个框阴影，但它没有正确显示。只有一部分阴影出现。
Image: Box-Shadow doesn't appear properly

* { 
 margin: none;
 font-size: 100%;
 font-family: courier new; 
} 
*:focus {
 outline: none;
}
#calculator {
 box-shadow: 0 1px 3px 4px rgba(0, 0, 0, 0.2);
}
#output { 
 height: 30%; 
 width: 100%; 
 font-size: 150%; 
 text-align: right; 
 color: black; 
 background-color: white;
 border: none;
} 
button { 
 background-color: black; 
 color: white; 
 width: 25%; 
 height: 50px; 
 float: left; 
 border: none; 
} 

<div id="calculator"> 
 <input id="output" disabled> 
 <div> 
  <button onclick="Write('(')">(</button> 
  <button onclick="Write(')')">)</button> 
  <button onclick="Write(' mod ')">mod</button> 
  <button style="background-color: gray" onclick="Clear()">C</button> 
  <br> 
  <button onclick="Write(7)">7</button> 
  <button onclick="Write(8)">8</button> 
  <button onclick="Write(9)">9</button> 
  <button onclick="Write(' / ')">/</button> 
  <br> 
  <button onclick="Write(4)">4</button> 
  <button onclick="Write(5)">5</button> 
  <button onclick="Write(6)">6</button> 
  <button onclick="Write(' * ')">*</button> 
  <br> 
  <button onclick="Write(1)">1</button> 
  <button onclick="Write(2)">2</button> 
  <button onclick="Write(3)">3</button> 
  <button onclick="Write(' - ')">-</button> 
  <br> 
  <button onclick="Write(0)">0</button> 
  <button onclick="Write('.')">.</button> 
  <button style="background-color:rgb(70, 70, 250)" onclick="calculate()">=</button> 
  <button onclick="Write(' + ')">+</button> 
  </div> 
</div>

谁能告诉我这段代码有什么问题？
还有，谁能告诉我
如何在 Stack Overflow 中更改语法高亮语言？

Answer 1

你有 float :左；在您的按钮样式上，这就是导致容器高度无法调整的问题的原因。我已经把它换成了一个显示:flex 和一个 flex-wrap 并为了演示目的增加了 box-shadow 的不透明度。

* { 
 margin: none;
 font-size: 100%;
 font-family: courier new; 
} 
*:focus {
 outline: none;
}
#calculator {
 box-shadow: 0 1px 3px 4px rgba(0, 0, 0, 0.8);
}

#content {
  display: flex; 
  flex-wrap: wrap;
  }

#output { 
 height: 30%; 
 width: 100%; 
 font-size: 150%; 
 text-align: right; 
 color: black; 
 background-color: white;
 border: none;
} 
button { 
 background-color: black; 
 color: white; 
 width: 25%; 
 height: 50px; 
 border: none; 
} 

<div id="calculator"> 
 <input id="output" disabled> 
 <div id = "content"> 
    <button onclick="Write('(')">(</button> 
    <button onclick="Write(')')">)</button> 
    <button onclick="Write(' mod ')">mod</button> 
    <button style="background-color: gray" onclick="Clear()">C</button> 
    <br> 
    <button onclick="Write(7)">7</button> 
    <button onclick="Write(8)">8</button> 
    <button onclick="Write(9)">9</button> 
    <button onclick="Write(' / ')">/</button> 
    <br> 
    <button onclick="Write(4)">4</button> 
    <button onclick="Write(5)">5</button> 
    <button onclick="Write(6)">6</button> 
    <button onclick="Write(' * ')">*</button> 
    <br> 
    <button onclick="Write(1)">1</button> 
    <button onclick="Write(2)">2</button> 
    <button onclick="Write(3)">3</button> 
    <button onclick="Write(' - ')">-</button> 
    <br> 
    <button onclick="Write(0)">0</button> 
    <button onclick="Write('.')">.</button> 
    <button style="background-color:rgb(70, 70, 250)" onclick="calculate()">=</button> 
    <button onclick="Write(' + ')">+</button> 
  </div> 
</div>