如何修复输入类型复选框右侧对齐并单击孔标签显示剩余文本?

Question

>我需要设置输入类型复选框右侧对齐。我正在尝试这个，但复选框名称无法移动到右侧。

body {
color: #fff; 
background-color: #000;
}
.detail {
overflow: hidden;
height: 3.6em;
line-height: 1.2em;
width: auto;
}
#more:checked + div {
height: auto;
}

<label>
<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>
<input id="more" type="checkbox" style="display: none">...Read more
</label>

Answer 1

你可以做这样的事情：

body {color: #fff; background: #000}
.detail {
overflow: hidden;
height: 3.6em;
line-height: 1.2em;
text-align: justify;
}
#more {display: none}
#more:checked + label > .detail {height: auto}
label {pointer-events: none} /* optional */
.read {
pointer-events: initial; /* optional */
text-align: right;
background: #777; /* "block" demo */
cursor: pointer;
}
.read:after {content: "...Read more"}
#more:checked + label > .read:after {content: "...Read less"}

<div class="flex-container">
<input id="more" type="checkbox">
<label for="more">
<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>
<div class="read"></div>
</label>
</div>