html – 与其余表单对齐样式复选框

概述我正在尝试使用我的表单的其余部分对齐和设置一组复选框,但我没有太多经验样式表单.我正在努力分别引用图例,标签和输入框.我看过用不同标记构建的复选框,所以我不确定是否有更好的方法来实现这一点. 预期的布局/风格： HTML： <div id="appraisals-form" class="contact-form"> <form role="form" method="post" acti 我正在尝试使用我的表单的其余部分对齐和设置一组复选框,但我没有太多经验样式表单.我正在努力分别引用图例,标签和输入框.我看过用不同标记构建的复选框,所以我不确定是否有更好的方法来实现这一点.

预期的布局/风格：

HTML：

<div ID="appraisals-form" >    <form role="form" method="post" action="contact-form.PHP">        <label for="name"><span>name</span><input type="text"  name="name" required data-errormessage-value-missing="Please enter your name." /></label>        <label for="email"><span>Email</span><input type="email"  name="email" required data-errormessage-value-missing="Please enter your email address." /></label>        <label for="email"><span>Phone</span><input type="tel"  name="phone" required data-errormessage-value-missing="Please enter your phone number." /></label>        <label for="art-type" ><span >Type of Artwork</span><span >(i.e. sculpture,painting...)</span><input  type="text" name="name" required data-errormessage-value-missing="Please enter your item's type of artwork."></label>        <label for="artist" ><span >Artist name</span><span >(if kNown)</span><input  type="text" name="name" required data-errormessage-value-missing="Please enter your item's artist."></label>        <label for="Title" ><span >Title of PIEce</span><span >(if kNown)</span><input  type="text" name="name" required data-errormessage-value-missing="Please enter your item's Title."></label>        <label for="measurements"><span>Measurements</span><input type="text"  name="name" required data-errormessage-value-missing="Please enter your item's measurements." /></label>        <label for="date" ><span >Date / Age</span><span >(if kNown)</span><input  type="text" name="name" required data-errormessage-value-missing="Please enter your item's date / age."></label>        <label for="condition"><span>Condition</span><textarea name="message"  required data-errormessage-value-missing="Please enter your item's condition."></textarea></label>        <label for="doc" ><span >documentation</span><span >(certificates,receipts,prevIoUs appraisals,etc.)</span><textarea name="doc"  required data-errormessage-value-missing="Please enter your item's documentation."></textarea></label>        <label for="writing" ><span >Writing / Labels</span><span >(text or any writing or labels on the art)</span><textarea name="doc"  required data-errormessage-value-missing="Please enter your item's text / labels."></textarea></label>        <label for="purchase-hist" ><span >Purchase History</span><span >(date,cost,location,etc.)</span><textarea name="doc"  required data-errormessage-value-missing="Please enter your item's purchase history."></textarea></label>        <label for="additional" ><span >Additional Details</span><span >(anything else you kNow)</span><textarea name="doc"  required data-errormessage-value-missing="Please enter your item's additional details."></textarea></label>        <fIEldset>            <legend>Type of Appraisal</legend>            <input type="checkBox" name="app-type" value="Insurance" />Insurance            <input type="checkBox" name="app-type" value="Donation" />Donation            <input type="checkBox" name="app-type" value="General Estate Planning" />General Estate Planning        </fIEldset>        <div ><input type="submit" value=""  /></div>                      </form>             </div>

CSS：

.contact-form {    margin: 0 auto;    max-wIDth: 600px;    position: relative;    top: 50%;    transform: translateY(-50%);    Font-family: 'linotypeUniversW01-Thin_723604',Arial,sans-serif;    Font-size: 20px;}.contact-form label {    display: block;    margin: 0px 0px 15px 0px;    text-transform: uppercase; /* New */}.contact-form label > span {    padding-top: 8px;}.contact-form label > span,#recaptcha::before {    wIDth: 100px;    text-align: right;    float: left;    padding-right: 20px;    content: "";}.contact-form input,.contact-form textarea,.contact-form fIEldset {    margin-bottom: 15px;    padding: 10px;    border: none;}.contact-form input.input-fIEld {    wIDth: 70%;    height: 20px;    Font-size: 18px;}.contact-form .textarea-fIEld {    height: 250px;    margin-bottom: 11px;}.contact-form .textarea-fIEld,.g-recaptcha {    wIDth: 70%;    Font-size: 18px;    display: inline-block;}.contact-form fIEldset { /* New */    Font-size: 16px;}.contact-form legend { /* New */    wIDth: 150px;    text-align: right;    float: left;    padding-right: 20px;    content: "";    text-transform: uppercase;}.contact-form fIEldset input { /* New */    margin-right: 10px;    text-align: left;}.g-recaptcha {    height: 78px !important;}#recaptcha {    display: block;    margin: 0px 0px 24px 0px;}textarea {    resize: none;}textarea:focus,input:focus {    outline: 0;}input.submit-button {    background-image: url("../img/submit-button.jpg");    wIDth: 225px;    height: 60px;    border: none;}

小提琴：http://jsfiddle.net/trqgos4q/.

任何帮助将非常感激！

解决方法 看起来你正在使用一个固定的布局,所以我在你的第一个输入中添加了一个margin-left,并在你的评估标签上添加了Box-sizing：border-Box,这样就不再将输入标签推向右边.

这些更改使复选框按照您要查找的方式对齐.

这是相关的CSS：

#appraisalTypeWrap > legend {    Box-sizing: border-Box;}#appraisalTypeWrap > input:first-of-type {    margin-left: 10px;}

我给了“评估类型”字段集appraisalTypeWrap ID,这就是这个CSS的目标.

工作Jsfiddle：http://jsfiddle.net/trqgos4q/2/

总结

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

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