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 />";
  }
}