Question

这是我的HTML和CSS。如何在从右到左的语言的右边制作标签？这是从免费的html5模板中大量获取的。

该复选框始终位于其标签的左侧，如何将其移至右侧？

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2rem;
		opacity: 0;
		width: 1rem;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			cursor: pointer;
			display: inline-block;
			font-size: 1rem;
			letter-spacing: 0;
			font-family: "Merriweather", Georgia, serif;
			text-transform: none;
			font-weight: 300;
			padding-left: 2.8rem;
			padding-right: 1rem;
			position: relative;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				border-radius: 0;
				border: solid 2px;
				content: '';
				display: inline-block;
				font-size: 0.8rem;
				height: 1.8rem;
				left: 0;
				line-height: 1.65rem;
				position: absolute;
				text-align: center;
				top: -0.125rem;
				width: 1.8rem;
			}

		<div class="col-12">
			<input type="checkbox" id="demo-copy" name="demo-copy">
			<label for="demo-copy">show password</label>
		</div>

Answer 1

Flexbox可以做到：

mapfile ... # see above
for name in "${names[@]}"; do
    # do something with $name
done

input[type="checkbox"],
input[type="radio"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  margin-right: -2rem;
  opacity: 0;
  width: 1rem;
  z-index: -1;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
  text-decoration: none;
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: 0;
  font-family: "Merriweather", Georgia, serif;
  text-transform: none;
  font-weight: 300;
  padding-left: 2.8rem;
  padding-right: 1rem;
  position: relative;
  /* this */
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

input[type="checkbox"]+label:before,
input[type="radio"]+label:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  text-transform: none !important;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

input[type="checkbox"]+label:before,
input[type="radio"]+label:before {
  border-radius: 0;
  border: solid 2px;
  content: '';
  font-size: 0.8rem;
  height: 1.8rem;
  line-height: 1.65rem;
  text-align: center;
  width: 1.8rem;
  margin: 0 1em;
}

.col-12 {
  display: flex;
  justify-content: flex-start;
}


}

Answer 2

只需将标签移到第一位即可。

<label for="check">My Checkbox</label>
<input type="checkbox" id="check">

Answer 3

无需将CSS应用于type =“ checkbox”和标签。

您需要做的就是将<label>标记移到<input>标记之前，如下所示。

<label for="demo-copy">show password</label>
<input type="checkbox" id="demo-copy" name="demo-copy">

复选框始终位于其标签的左侧，如何将其移至右侧？

3 个答案: