如何解决input type checkbox右对齐问题并实现点击label显示剩余文本？

我来帮你搞定这两个需求：让Checkbox（视觉上）右对齐，同时点击Label能正常展开剩余文本，还能让关联文本（比如"Read more"）正确和Checkbox对应上。

先说说你原来代码的问题：原来的结构把<div class="detail">放在了<input>前面，布局上很难控制关联文本的位置；而且直接隐藏了Checkbox，没法实现视觉上的右对齐效果。我给你调整一下结构和样式，完美解决这两个问题：

完整解决方案代码 #

CSS 样式 #

body {
  color: #fff;
  background-color: #000;
  padding: 20px;
}

/* 把label设置为相对定位，方便放置Checkbox的视觉元素 */
.label-wrap {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
}

/* 折叠状态下的文本容器 */
.detail {
  overflow: hidden;
  height: 3.6em;
  line-height: 1.2em;
  margin-bottom: 10px;
  transition: height 0.3s ease; /* 加上过渡动画更丝滑 */
}

/* 隐藏原生Checkbox，用伪元素做视觉样式 */
#more {
  display: none;
}

/* 模拟Checkbox的视觉元素，定位在右侧 */
#more::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(3.6em + 5px); /* 和折叠文本底部对齐 */
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 3px;
  background-color: transparent;
  transition: background-color 0.2s;
}

/* Checkbox选中时的视觉样式 */
#more:checked::after {
  background-color: #fff;
  content: "✓";
  color: #000;
  text-align: center;
  line-height: 18px;
}

/* 关联文本的容器，放在Checkbox左侧 */
.read-more-text {
  position: absolute;
  right: 25px; /* 给Checkbox视觉元素留空间 */
  top: calc(3.6em + 2px);
}

/* Checkbox选中后，展开文本，同时修改关联文本 */
#more:checked ~ .detail {
  height: auto;
}

#more:checked ~ .read-more-text::after {
  content: "...Read less";
}

#more:not(:checked) ~ .read-more-text::after {
  content: "...Read more";
}

HTML 结构 #

<label class="label-wrap">
  <input id="more" type="checkbox">
  <div class="detail">
    Android is a mobile operating system developed by Google, based on a modified version of the Linux kernel and other open source software and designed primarily for touchscreen mobile devices such as smartphones and tablets. In addition, Google has further developed Android TV for televisions, Android Auto for cars, and Wear OS for wrist watches, each with a specialized user interface. Variants of Android are also used on game consoles, digital cameras, PCs and other electronics.
  </div>
  <span class="read-more-text"></span>
</label>

关键改动说明 #

• 结构调整：把<input>移到了<label>的最前面，这样用CSS兄弟选择器~能更灵活地控制后续元素；新增了<span class="read-more-text">来单独控制关联文本的位置，避免和文本内容混在一起。
• Checkbox视觉化：原生Checkbox隐藏，用::after伪元素模拟一个自定义的Checkbox样式，通过绝对定位放在右侧，完美实现右对齐需求。
• 交互优化：添加了过渡动画，让文本展开/折叠更流畅；同时在Checkbox选中时，自动把"Read more"切换成"Read less"，交互体验更好。
• 布局对齐：通过绝对定位让关联文本和自定义Checkbox视觉元素对齐，解决了你之前关联文本无法移到右侧的问题。

现在你可以直接用这段代码，既能实现Checkbox视觉上的右对齐，又能点击Label任意区域（包括文本、Checkbox、关联文本）来展开/折叠剩余内容啦！

内容的提问来源于stack exchange，提问作者Alish