html - 带有倾斜标签的 CSS 复选框-6ren

html - 带有倾斜标签的 CSS 复选框

转载作者：行者123 更新时间：2023-12-02 09:04:08

24

4

我一直在尝试实现带有倾斜文本的复选框，如下图所示(其中需要一定程度的重叠):

通过使用变换样式和设置边距，我已经能够使文本处于相同的垂直水平，但是我在水平偏移元素以使它们出现在彼此旁边时遇到问题。

(这是一个动态表，其中的行将被重复，这就是为什么我使用“span”而不是“label for”以避免为所有复选框生成唯一 id 的复杂性)

table tbody {
  display: block;
}

.angled_text {
  display: block;
  margin-top: -18px;
  transform:         rotate(-45deg);

  /* legacy */
  -webkit-transform: rotate(-45deg);
  -moz-transform:    rotate(-45deg);
  -ms-transform:     rotate(-45deg);
  -o-transform:      rotate(-45deg);
}

<!DOCTYPE html>
<html lang="en">
<body>
  <table id="dynamic_table">
    <tbody>
      <tr>
        <td>
          <span class="angled_text">Monday</span>
          <span class="angled_text">Tuesday</span>
          <span class="angled_text">Wednesday</span>
          <span class="angled_text">Thursday</span>
          <span class="angled_text">Friday</span>
          
          <br>
  
          <input type="checkbox" name="monday" value="monday">
          <input type="checkbox" name="tuesday" value="tuesday">
          <input type="checkbox" name="wednesday" value="wednesday">
          <input type="checkbox" name="thursday" value="thursday">
          <input type="checkbox" name="friday" value="friday">
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

最佳答案

我就是这么做的。将输入包裹在标签内以使其可单击。使用绝对定位来定位子跨度，使其脱离正常流程。并在 div 顶部添加足够的填充，以免标签被切断。

div {
  padding-top: 55px;
}
label.angled_text {
  margin-left: 4px;
  display: inline-block;
  position: relative;
}

label.angled_text span {
  position: absolute;
  top: -14px;
  left: .5em;
  
  transform-origin: bottom left;
  transform: rotate(-45deg);
  /* legacy */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}

<!DOCTYPE html>
<html lang="en">

<body>
  <div>
    <label class="angled_text">
      <input type="checkbox" name="monday" value="monday">
      <span>Monday</span>
    </label>
    <label class="angled_text">
      <input type="checkbox" name="tuesday" value="tuesday">
      <span>Tuesday</span>
    </label>
    <label class="angled_text">
      <input type="checkbox" name="wednesday" value="wednesday">
      <span>Wednesday</span>
    </label>
    <label class="angled_text">
      <input type="checkbox" name="thursday" value="thursday">
      <span>Thursday</span>
    </label>
    <label class="angled_text">
      <input type="checkbox" name="friday" value="friday">
      <span>Friday</span>
    </label>
  </div>
</body>

</html>

关于html - 带有倾斜标签的 CSS 复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60406103/

24

4

0

文章推荐： sql - Oracle sql日期查询格式个位数

文章推荐： Ruby 互斥体与 GIL

首页

博学

6Ren·AI

商城

html - 带有倾斜标签的 CSS 复选框

标签)？
根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？是吗 stackoverflow 或 stackoverflow 谢谢最佳答案根据网络标准，您不能将 block 元素放入内

首页

博学

6Ren·AI

商城

html - 带有倾斜标签的 CSS 复选框

标签)？ 根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？ 是吗 stackoverflow 或 stackoverflow 谢谢 最佳答案 根据网络标准，您不能将 block 元素放入内

标签)？
根据 Web 标准，创建带有标题 1 的链接的正确代码是什么？是吗 stackoverflow 或 stackoverflow 谢谢最佳答案根据网络标准，您不能将 block 元素放入内