Question

快速提问，我想知道是否可以将我的3个复选框与水平方向对齐，而不是现在的方式是垂直方式

感谢您的帮助

＆＃13;

	<div class="wrapper3">
	<p>Do You Want Sound ?</p>
	<input type="checkbox" value="No" style="color: Black;" id="sound">Yes
    <p>Do You want Flashes ?</p>
    <input type="checkbox" value="No" style="color: Black;" id="flash">Yes
    <p>Do You want Text ?</p>
    <input type="checkbox" value="No" style="color: Black;" id="text">Yes
    <br />
	</div>

＆＃13;

Answer 1

您可以通过将段落和复选框包含在<div>中并将display标记的<p>属性更改为inline-block来轻松实现此目的。这是一个演示：

＆＃13;

p {
  display: inline-block;
}

＆＃13;

<div class="wrapper3">
  <div>
    <p>Do You Want Sound ?</p>
    <input type="checkbox" value="No" style="color: Black;" id="sound">Yes</div>
  <div>
    <p>Do You want Flashes ?</p>
    <input type="checkbox" value="No" style="color: Black;" id="flash">Yes</div>
  <div>
    <p>Do You want Text ?</p>
    <input type="checkbox" value="No" style="color: Black;" id="text">Yes</div>
  <br />
</div>

＆＃13;

Answer 2

我更喜欢在没有内联CSS的情况下使用正确的语义标记：

<div class="wrapper3">
  <p>
    <strong>Do You Want Sound?</strong>
    <label for="sound">
      <input type="checkbox" value="Yes" id="sound"> Yes
    </label>
  </p>

  <p>
    <strong>Do You want Flashes?</strong>
    <label for="flash">
      <input type="checkbox" value="Yes" id="flash">Yes
    </label>
  </p>

  <p>
    <strong>Do You want Text?</strong>
    <label for="text">
      <input type="checkbox" value="Yes" id="text">Yes
    </label>
  </p>
</div>

这是附带的CSS：

.wrapper3 p {
  display : inline-block;
  margin : 0;
  padding : 1em;
  border : none;
}

.wrapper3 label {
  display : block;
}

.wrapper3 input {
  color: #000;
}

顺便说一句，你用“是”标记了复选框，但是它们的值表示“否”。我已经在我的代码示例中更改了它。这是一个plnkr

如何将复选框水平对齐

2 个答案: