个人中心
gpt4 book ai didi

CSS 网格 : centering and overlapping difficulties

转载 作者：太空宇宙 更新时间：2023-11-03 21:04:04 24 4
gpt4 key购买 nike

我正在尝试创建一个简单的计算器，仅使用 HTML 和 CSS 进行布局，最终使用纯 JavaScript 进行功能。

我希望站点/页面能够响应，这就是我使用 CSS 网格而不使用绝对单位的原因； % 和 fr 而不是 px...

计算器本身应该是一个居中的正方形网格，按钮中的文本在水平和垂直方向上都居中，并且所有按钮都应该适合“计算器”。

<html>
   <body>
      <div class="calc">
        <button id="bp">+&nbsp;/&nbsp;-</button>
        <button id="bc">C</button>
        <button id="bb">X</button>
         <button id="b7">7</button>
         <button id="b8">8</button>
         <button id="b9">9</button>
         <button id="b4">4</button>
         <button id="b5">5</button>
         <button id="b6">6</button>
         <button id="b1">1</button>
         <button id="b2">2</button>
         <button id="b3">3</button>
         <button id="bd">.</button>
         <button id="b0">0</button>
         <button id="be">=</button>
      </div>
   </body>
</html>

div.calc {
   max-width: 80%;
   margin: 1% auto;

   border: 2px solid #111111;
   border-radius: 5px;
   padding: 1%;

    display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(5, 1fr);
   grid-gap: 2%;

    justify-items: center;
    align-items: center; 
}

div.calc > button {
   background-color: lightgrey;
   color: darkblue;

   border: 2px solid #111111;
   border-radius: 5px;

   font-size: 2em;
   cursor: pointer;

   vertical-align: center;
   text-align: center;

   width: 100%;
   height: 0;
   padding: 50%;
}

button#bp,
button#bd {
    background-color: blue;
    color: yellow;
}

button#bc {
    background-color: red;
    color: white;
}

button#bb {
    background-color: yellow;
    color: blue;
}

button#be {
    background-color: green;
    color: yellow;
}

Codepen

计算器的 div 似乎不够高，无法容纳按钮，因此网格的底行重叠并溢出到计算器之外。

我试着调整 calc div 的高度(高度:100% ...)但最后一行总是超过...

我似乎无法让按钮内的文本正确居中；特别是横向。 “+/-”按钮就是一个很好的例子。我已将文本对齐设置为中心，justify-items 和 align-items 都居中。我知道最后两个指的是网格中的按钮项本身。但我看不出还有什么地方可以让文本正确居中。

我希望这是非常简单的事情，我只是一遍又一遍地盯着相同的代码看太多个小时了。

如果您不想更正我的代码，而更愿意向我指出任何可能有帮助的在线示例或解释，我会很乐意做功课。

谢谢!

最佳答案

问题是 grid-gap:2%。它适用于水平方向，因为我们可以根据宽度解决 2%，但对于高度它不起作用，因为没有定义高度。基本上，浏览器首先计算没有间隙的高度，然后添加间隙。

您应该考虑使用 px 或其他单位，例如 vw/vh。我还更改了您将按钮居中的方式。 ( Centering in CSS Grid )

div.calc {
  max-width: 80%;
  margin: 1% auto;
  border: 2px solid #111111;
  border-radius: 5px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  
  grid-gap: 1vw;
  padding: 1vw; /*make the padding the same*/
}

div.calc>button {
  background-color: lightgrey;
  color: darkblue;
  border: 2px solid #111111;
  border-radius: 5px;
  font-size: 2em;
  cursor: pointer;
  /*to center*/
  display: flex;
  align-items: center;
  justify-content: center;
  /**/
}
/*keep the ratio*/
div.calc>button:before {
  content: "";
  display: inline-block;
  padding-top: 100%;
}
/**/
button#bp,
button#bd {
  background-color: blue;
  color: yellow;
}

button#bc {
  background-color: red;
  color: white;
}

button#bb {
  background-color: yellow;
  color: blue;
}

button#be {
  background-color: green;
  color: yellow;
}
<div class="calc">
    <button id="bp">+&nbsp;/&nbsp;-</button>
    <button id="bc">C</button>
    <button id="bb">X</button>
    <button id="b7">7</button>
    <button id="b8">8</button>
    <button id="b9">9</button>
    <button id="b4">4</button>
    <button id="b5">5</button>
    <button id="b6">6</button>
    <button id="b1">1</button>
    <button id="b2">2</button>
    <button id="b3">3</button>
    <button id="bd">.</button>
    <button id="b0">0</button>
    <button id="be">=</button>
  </div>

关于CSS 网格 : centering and overlapping difficulties，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55741699/

24 4 0
文章推荐： 用于更改元素颜色属性的 Javascript 代码
文章推荐： python - re.findall 表现得很奇怪
文章推荐： html - 无法将元素缩放到 100% 宽度
文章推荐： python - 分析数据集的增减
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com