如何使这些复选框排成一排？

发布于 2025-02-12 09:07:53 字数 1363 浏览 0 评论 0原文

我正在尝试以类似网格的格式从复选框中进行清单，但是很难获得顶级的复选框，这是唯一带有标签的复选框，与其余的复选框相对。看来Checkbox在顶部的标签长度分开了，因此我认为我只需要找到导致它并删除它的代码的一部分，但是我似乎找不到它。有人可以帮我吗？代码下方。

    <head>
<style>
.checkboxes input{
  margin: 10px 20px 10px 20px;
}
ul{
      display: flex;
      align-items: flex-start;
      justify-content: center;
      margin:0px; padding:0px;
    }
    ul li{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap:wrap;
    }
    ul li label{ text-align:center; display:block; width:100%;}

</style>

<center>
</head>

<body>
<br><br><br>
<ul>
  <li>
  <label>Inspect</label><input type="checkbox">
  </li>
  <li>
 <label>Repair</label><input type="checkbox">
  </li>
  <li>
  <label>New Part</label><input type="checkbox">
  </li>
  <li>
  <label>Unit Exch</label><input type="checkbox">
  </li>
  
  </ul>

<div class="checkboxes">


<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<br>

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<br>

</body>

原文

I am trying to make a checklist out of checkboxes in a grid-like format, but am having trouble getting the top row of checkboxes, which are the only ones with labels, to line up with the rest. It looks like the checkboxes up top are spaced apart based on their label length, so I think I just need to find the portion of the code that causes that and remove it, but I cannot seem to find it. Can someone help me? The code is down below.

    <head>
<style>
.checkboxes input{
  margin: 10px 20px 10px 20px;
}
ul{
      display: flex;
      align-items: flex-start;
      justify-content: center;
      margin:0px; padding:0px;
    }
    ul li{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap:wrap;
    }
    ul li label{ text-align:center; display:block; width:100%;}

</style>

<center>
</head>

<body>
<br><br><br>
<ul>
  <li>
  <label>Inspect</label><input type="checkbox">
  </li>
  <li>
 <label>Repair</label><input type="checkbox">
  </li>
  <li>
  <label>New Part</label><input type="checkbox">
  </li>
  <li>
  <label>Unit Exch</label><input type="checkbox">
  </li>
  
  </ul>

<div class="checkboxes">


<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<br>

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<br>

</body>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

呆° 2025-02-19 09:07:53

尝试一下，不使用Flexbox来获得一致的行为，

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 18.5px; /* Height of Lable */
}

ul li {
  display: inline;
  position: relative;
}

ul li label {  
  position: absolute;
  left: 50%;
  transform: translate( -50%, -100% );
  white-space: nowrap;
}

ul li input,
.checkboxes input {
  margin: 10px 30px 10px 30px;
}

<ul>
  <li>
    <label>Inspect</label><input type="checkbox">
  </li>
  <li>
    <label>Repair</label><input type="checkbox">
  </li>
  <li>
    <label>New Part</label><input type="checkbox">
  </li>
  <li>
    <label>Unit Exch</label><input type="checkbox">
  </li>

</ul>

<div class="checkboxes">


  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <br>

  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <br>

Try this, not using flexbox to get consistent behaviour,

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 18.5px; /* Height of Lable */
}

ul li {
  display: inline;
  position: relative;
}

ul li label {  
  position: absolute;
  left: 50%;
  transform: translate( -50%, -100% );
  white-space: nowrap;
}

ul li input,
.checkboxes input {
  margin: 10px 30px 10px 30px;
}

<ul>
  <li>
    <label>Inspect</label><input type="checkbox">
  </li>
  <li>
    <label>Repair</label><input type="checkbox">
  </li>
  <li>
    <label>New Part</label><input type="checkbox">
  </li>
  <li>
    <label>Unit Exch</label><input type="checkbox">
  </li>

</ul>

<div class="checkboxes">


  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <br>

  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <br>

回复收藏 0 原文

~没有更多了~