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以具有相对位置，然后必须添加position:absolute;的数字框imgClasses的css以及何时通过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 />";
  }
}