Html 对齐复选框旁边的文本

Aligning text next to a checkbox

提问by Tim Aych

Simple question, and undoubtedly an easy solution--I'm just having a lot of trouble finding it despite searching SO and Google for a while.

简单的问题，无疑是一个简单的解决方案——尽管搜索了 SO 和 Google 一段时间，但我还是很难找到它。

All I'm looking to do is take the snippet of text "I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)" and having it aligned to the right of the check box (with the text left aligned), but not wrapping around it like it is now.

我想要做的就是获取文本片段“我对增强的列表或高级配置文件感兴趣，（我们团队的成员将及时回复更多信息）”并将其与支票的右侧对齐框（文本左对齐），但不像现在那样环绕它。

Here's my JSFiddle

这是我的JSFiddle

Code (using PureCSS for styling):

代码（使用 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>

Any help would be much appreciated. Thanks.

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

回答by lurker

Here's a simple way. There are probably others.

这里有一个简单的方法。可能还有其他人。

<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>

I used a divto "block" structure the text and moved it to the right. The float: lefton the inputkeeps the checkbox to the left of the text (not above). The margin-topon the inputtweaks the top alignment with the text.

我使用 adiv来“阻止”文本结构并将其移动到右侧。在float: left上input保持的复选框文字（不超过）的左侧。在margin-top对input与文本调整顶部对齐。

The fiddle.

的小提琴。

回答by apex

Try floating the check box left, and then wrap the text in a div with "overflow: hidden;". Maybe additionally, add some padding as I did below to give the text some breathing room from the check box (the padding is optional though).

尝试将复选框向左浮动，然后将文本包裹在带有“溢出：隐藏；”的 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>

回答by Paul LeBeau

This is the method, that I used. It worked better for me than the many other methods I found on SO.

这是我使用的方法。它比我在 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>