将文本对齐到复选框旁

Question

简单的问题，无疑有一个简单的解决方案——尽管我已经在SO和Google上搜索了一段时间，但仍然很难找到它。

我想要做的就是将文本“我对增强列表或高级配置文件感兴趣，（我们团队的成员会及时回复进一步信息）”放置在复选框的右侧（文本左对齐），但不像现在这样绕在它周围。

这是我的JSFiddle

代码（使用PureCSS进行样式设置）：

<form class="pure-form pure-form-aligned">
                    <fieldset>
                        <div class="pure-control-group">
                            <label for="name">Product Name</label>
                            <input id="name" type="text" placeholder="Username">
                        </div>

                        <div class="pure-control-group">
                            <label for="password">Contact Name</label>
                            <input id="password" type="text" placeholder="Password">
                        </div>

                        <div class="pure-control-group">
                            <label for="email">Contact Email</label>
                            <input id="email" type="email" placeholder="Email Address">
                        </div>

                        <div class="pure-control-group">
                            <label for="foo">Website</label>
                            <input id="foo" type="text" placeholder="Enter something here...">
                        </div>

                        <div class="pure-control-group">
                            <label for="foo">Description:</label>
                            <textarea id="description" type="text" placeholder="Enter description here..."></textarea>
                        </div>                      

                        <div class="pure-controls">
                            <label for="cb" class="pure-checkbox">
                                <input id="cb" type="checkbox">
                                I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
                            </label>

                            <button type="submit" class="pure-button pure-button-primary">Submit</button>
                        </div>
                    </fieldset>
                </form>

非常感谢任何帮助。谢谢。

- Tim Aych

Answer 1

这是一种简单的方式。可能还有其他方法。

<input id="cb" type="checkbox" style="float: left; margin-top: 5px;>">
<div style="margin-left: 25px;">
     I'm interested in an enhanced listing or premium profile,
     (a member of our team will respond promptly with further information)
</div>

我使用了一个 div 元素来“块状”结构化文本，并将其向右移动。在 input 上设置的 float: left 使复选框位于文本左侧而不是上方。在 input 上设置的 margin-top 调整了它与文本之间的顶部对齐。

这是示例代码。

- lurker

Answer 2

这是我使用的方法。相比在SO上找到的其他方法，它对我来说效果更好。

LABEL.indented-checkbox-text
{
  margin-left: 2em;
  display: block;
  position: relative;
  margin-top: -1.4em;  /* make this margin match whatever your line-height is */
  line-height: 1.4em;  /* can be set here, or elsewehere */
}

<input id="myinput" type="checkbox" />
<label for="myinput" class="indented-checkbox-text">I have reviewed the business information and documentation above, and assert that the information and documentation shown is current and accurate.</label>

- Paul LeBeau

Answer 3

尝试将复选框向左浮动，然后将文本包装在一个带有“overflow: hidden;”的div中。也许还可以像下面我所做的那样添加一些填充，以使文本与复选框之间有些空间（填充是可选的）。

<div class="pure-controls">
    <label for="cb" class="pure-checkbox">
    <input id="cb" type="checkbox" style="float: left;">
        <div style="overflow: hidden; padding: 0px 0px 0px 5px;">
             I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
        </div>
</label>
    <button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>

- apex

---

希望在stackoverflow上询问澄清是否可以：您的“overflow：hidden;”如何停止文本垂直对齐复选框？没有它，它与复选框对齐，有了它，文本与其余文本对齐。它不应该只隐藏任何溢出的内容，而不是重新对齐文本吗？ - Exit Code 1

@ExitCode1 我认为这里已经有答案了（https://stackoverflow.com/questions/60855972/in-css-how-does-overflow-interact-with-float）。但在你深入研究之前，我现在很少使用浮动。我建议改用[flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)。 - apex