标签生成略低于跨度或在Jade / Pug中输入

时间:2018-06-05 16:22:25

标签: html css pug

我试图在Jade(Pug)中创建一个表单,但是当我的跨度和单选按钮在每个条目的标签上生成时略高于我的标签。它看起来像这样:enter image description here

我希望所有文字都与标签对齐。这都在一个表格内。我的Jade代码如下:

form.inline-form(ng-submit="submit()")

    .option-group(ng-show="visible('checkCountry')")
        #checkboxes
            label Does this country have a code?
            span  Yes 
            input(type='radio', name='checkCountry', value='true', id = 'yes', ng-click="showCountries = false; displayIdentifierInput = true", checked="checked")
            span  No 
            input(type='radio', name='checkCountry', value='false', id = 'no',ng-click="showCountries = true; displayIdentifierInput = false")

    .option-group(ng-show="showCountries && visible('checkCountry')")
        #selectcountry
            label Country
            select#countryName(required, ng-model="selectedCountry", ng-options="options", ng-change="function()")


    .option-group(ng-show="!displayIdentifierInput && visible('checkCountry')")
        #autogeneratedtext
            label Identifier
            span A temporary identifier will be generated automatically

适用的CSS是:

inline-form .option-group label {
    text-align: right;
    float: left;
    width: 192px;
    display: block;
    margin-right: 10px;
    padding: 4px;
}
.option-group label span {
    font-weight: normal;
}
.inline-form .option-group label+input, .inline-form .option-group label+textarea, .inline-form .upload {
    width: 340px;
    float: left;
    margin-right: 10px;
}

另外,我怎么能避免使用`& nbps'在无线电输入之间创建我的空间?谢谢!

0 个答案:

没有答案