Question

简单的问题，毫无疑问是一个简单的解决方案 - 尽管在搜索SO和谷歌一段时间后，我仍然很难找到它。

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

这是我的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>

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

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来阻止＆＃34;阻止＆＃34;构造文本并将其移动到右侧。 float: left上的input会将复选框保留在文本的左侧（不在上方）。 margin-top上的input会调整与文字的顶部对齐方式。

fiddle。

Answer 2

尝试向左浮动复选框，然后使用“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>

Answer 3

这是我使用的方法。它比我在SO上找到的许多其他方法更适合我。

＆＃13;

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 */
}

＆＃13;

对齐复选框旁边的文本

3 个答案: