html – 对齐复选框旁边的文本

概述简单的问题,毫无疑问是一个简单的解决方案 – 尽管在搜索SO和谷歌一段时间后,我仍然很难找到它. 我所要做的就是获取文字片段“我对增强的列表或高级档案感兴趣,(我们团队的一名成员将及时回复更多信息)”并将其与支票右侧对齐框(文字左对齐),但不像现在一样环绕它. 这是我的JSFiddle 代码(使用PureCSS进行样式设计)： <form class="pure-form pure-form-al 简单的问题,毫无疑问是一个简单的解决方案 – 尽管在搜索SO和谷歌一段时间后,我仍然很难找到它.

我所要做的就是获取文字片段“我对增强的列表或高级档案感兴趣,(我们团队的一名成员将及时回复更多信息)”并将其与支票右侧对齐框(文字左对齐),但不像现在一样环绕它.

这是我的JSFiddle

代码(使用PureCSS进行样式设计)：

<form >                    <fIEldset>                        <div >                            <label for="name">Product name</label>                            <input ID="name" type="text" placeholder="Username">                        </div>                        <div >                            <label for="password">Contact name</label>                            <input ID="password" type="text" placeholder="Password">                        </div>                        <div >                            <label for="email">Contact Email</label>                            <input ID="email" type="email" placeholder="Email Address">                        </div>                        <div >                            <label for="foo">Website</label>                            <input ID="foo" type="text" placeholder="Enter something here...">                        </div>                        <div >                            <label for="foo">Description:</label>                            <textarea ID="description" type="text" placeholder="Enter description here..."></textarea>                        </div>                                              <div >                            <label for="cb" >                                <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" >submit</button>                        </div>                    </fIEldset>                </form>

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

解决方法 这是一个简单的方法.可能还有其他人.

<input ID="cb" type="checkBox" ><div >     I'm interested in an enhanced Listing or premium profile,(a member of our team will respond promptly with further information)</div>

我使用div来“阻止”构造文本并将其移动到右侧.浮动：输入左侧保留复选框文本左侧(不在上方).输入上的margin-top调整顶部对齐文本.

fiddle.

总结

以上是内存溢出为你收集整理的html – 对齐复选框旁边的文本全部内容，希望文章能够帮你解决html – 对齐复选框旁边的文本所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。