在不同浏览器上查看时，如何修复或连接（复选框）按钮以防止移动？

Question

<td>
  <ul id="defects-pentagon">
  
    <li>
      <input type="checkbox" name="Defects" id="Taily" className="defect-taily" value="Taily"/>
       <label for="Taily">Taily</label>
       <div className="defect-taily-pentagon"></div>
    </li>
    
    <li>
      <input type="checkbox" name="Defects" id="Tapered" className="defect-tapered" value="Tapered"/>
      <label for="Tapered">Tapered</label>
      <div className="defect-tapered-pentagon"></div>
    </li>
    
    <li>
      <input type="checkbox" name="Defects" id="Curvy" className="defect-curvy" value="Curvy"/>
      <label for="Curvy">Curvy</label>
      <div className="defect-curvy-pentagon"></div>
    </li>
    
    <li>
      <input type="checkbox" name="Defects" id="Bumpy" className="defect-bumpy" value="Bumpy"/>
      <label for="Bumpy">Bumpy</label>
      <div className="defect-bumpy-pentagon"></div>
    </li>
    
    <li>
      <input type="checkbox" name="Defects" id="Irregular" className="defect-irregular" value="Irregular"/>
      <label for="Irregular">Irregular</label>
      <div className="defect-irregular-pentagon"></div>
    </li>
  </ul> 
</td>

.defect-taily-pentagon {
    width:.3rem;
    height:4.7rem;
    background:#d70022;

    position: relative;
    transform: rotate(56deg);
    top: -90%;
    left: 100%;
}

.defect-tapered-pentagon {
    width:.3rem;
    height:4.7rem;
    background:#d70022;

    position: relative;
    transform: rotate(-56deg);
    top: -90%;
    right: -50%
}

.defect-curvy-pentagon {
    width:.3rem;
    height:4.5rem;
    background:#d70022;

    position: relative;
    transform: rotate(-19deg);
    top: -100%;
    left: 85%;
}

.defect-bumpy-pentagon {
    width:.3rem;
    height:4.5rem;
    background:#d70022;

    position: relative;
    transform: rotate(19deg);
    top: -100%;
    right: -66%;
}

.defect-irregular-pentagon {
    width:.3rem;
    height:4.5rem;
    background:#d70022;

    position: relative;
    transform: rotate(90deg);
    top: -155%;
    left: 75%;
}

我正在尝试在 css 中创建一个五边形，其中每条边都是一个复选框按钮。我创建了 5 个按钮并将它们的大小更改为小而细的矩形。使用 rem 单位，我能够旋转和定位每个按钮，使它们形成五边形。但是，当 shrinking/growing 我的浏览器 window 时，按钮会移动。

我正在寻找一种可以将每个按钮连接在一起并将整个对象作为一个单元移动以将其放置在我的网页上的方法。我认为问题在于 rem 单位和 % 单位的使用，因为它们是相对于整个浏览器大小而不是它们所在的分隔线的大小。

除了 id/className/label 和页面上的相对位置 (top/left) 之外，每个按钮的代码都相同。

JavaScript

<li> 
    <input type="checkbox"
     id="Taily"
     className="defect-taily"/>
     
     <label for="Taily"> Taily </label>    
</li>

CSS

.defect-taily-pentagon {
  width:.3rem;
  height:4.7rem;
  background:#d70022;

  position: relative;
  transform: rotate(56deg);
  top: -90%;
  left: 100%;
}

P.S。我无法 post 图片，因为这是我在 Whosebug 上的第一个 post。有空的时候，我会post一张图片。

Answer 1

我想你可能想把所有的按钮都放在一个 div 中（像一个容器）并尝试将它们放置在 position: absolute; 相对于 div position: relative;.这样您只需要设置 div 的样式即可适应不同的设备。

这是一段代码，看看：

<html>
    <head>
        <style>
            html{width: 100%; font-size: 10px; padding: 0; margin: 0;}
            body{width: 100%; padding: 0; margin: 0;}
            .container{
                min-width: 250px; width: 100%; min-height: 200px; height: 100%; position: relative; padding: 0; margin: 0;
                background-image: radial-gradient(at 50% 50%, hsl(209, 64%, 61%), hsl(226, 100%, 13%));
                /* background-image: radial-gradient(at 35% -15%, var(--med ), var(--darker), var(--darkgris) 70%, var(--darkpurple)) */
            }
            .bg-black{
                border-radius: 5rem; height: 5rem; width: 5rem;
                background-image: radial-gradient(at -50% 100%, hsl(0, 0%, 100%), hsl(0, 0%, 0%));
            }
            .container>div:nth-child(1){position: absolute; left: calc(50% - 5rem /2); top: 0;}
            .container>div:nth-child(2){position: absolute; left: calc(100% - 5rem); top: calc(25% - 5rem /2);}
            .container>div:nth-child(3){position: absolute; left: calc(75% - 5rem /2); top: calc(100% - 5rem);}
            .container>div:nth-child(4){position: absolute; left: calc(25% - 5rem /2); top: calc(100% - 5rem);}
            .container>div:nth-child(5){position: absolute; left: 0; top: calc(25% - 5rem /2);}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="bg-black"></div>
            <div class="bg-black"></div>
            <div class="bg-black"></div>
            <div class="bg-black"></div>
            <div class="bg-black"></div>
        </div>
    </body>
</html>

在不同浏览器上查看时，如何修复或连接（复选框）按钮以防止移动？

How do I fix or connect (checkbox) buttons together as to resist shifting when viewing on different browsers?

html

javascript

css

browser

checkbox