CSS。来自for循环的每个按钮的自定义（x，y）位置

Question

所以我有 24 个按钮，现在看起来像：

应该是这样的（我的意思是按钮的位置）

这是我的按钮代码：

$info = getdate();
$date = $info['mday'];

for($i=1;$i<=24;$i++)
{
  if($i==$date)
  {
  Echo "<input type='button' class='imgClass'  onclick='issokantisLangas();' value='".$i."' src='deze.png'/>";
  }
  else
  {
  Echo "<input type='button' class='imgClass1' src='deze.png' value='".$i."' disabled />";
  }
}

这是按钮的 CSS：

<style type="text/css">
    .imgClass { 
    background-image: url(deze.png);
    background-position: 0px 0px; 
    background-repeat: no-repeat; 
    background-size:100% 100%;
    width: 60px; 
    height: 60px; 
    border: 0px;
    color:#ed1c24;
    font-weight:bold;
    font-size:20px;
    }
    .imgClass:hover{ 
    background-position: 0px 0px; 
    border: 2px solid white;
    } 
    .imgClass:active{ 
    background-position: 0px 0px; 
    }
        .imgClass1 { 
    background-image: url(deze.png);
    background-position: 0px 0px; 
    background-repeat: no-repeat; 
    background-size:100% 100%;
    margin: 10px 10px 10px 10px;
    width: 60px; 
    height: 60px; 
    border: 0px;
    color:#ed1c24;
    font-weight:bold;
    font-size:20px;
    }
</style>

当我用不同的数字更改这一行margin: 10px 10px 10px 10px; 时，所有按钮的移动都相似。我需要为每个按钮设置特定位置。怎么做？谢谢。

Answer 1

您必须使用 position:relative; 使具有蓝色背景并包含所有数字框的 div 具有相对位置，然后您必须添加数字框 imgClasses 的 css position:absolute; 并在打印标签时通过php，自己添加自定义位置。看看下面代码中的样式：

for($i=1;$i<=24;$i++)
{
  if($i==$date)
  {
  Echo "<input type='button' style="top: 35px; right: 400px;" class='imgClass'  onclick='issokantisLangas();' value='".$i."' src='deze.png'/>";
  }
  else
  {
  Echo "<input type='button' style="top: 35px; right: 400px;" class='imgClass1' src='deze.png' value='".$i."' disabled />";
  }
}