Question

我需要使表单看起来像“在复选框的标题和右侧的文字”等。这就像设置列表

但是我无法正确显示

这是我的代码

<div class="modal-body">
<form>
    <div class="col-md-12">
        <div class="form-group col-md-6" style="display: inline-block">
            <label for="defaultG">To default view </label>
            <input class="form-control" type="checkbox" value="Default" id="defaultG">
        </div>
        <div class="form-group col-md-6" style="display: inline-block">
            <p>Auto generated style due to common stylish rules.</p>
        </div>
    </div>
    <div class="form-group">
        <label for="extendedG">To extended view</label>
        <input class="form-control" type="checkbox" value="Extended" id="extendedG">
    </div>
    <div class="form-group">
        <label for="CompactG">To Compact view</label>
        <input class="form-control" type="checkbox" value="Compact" id="CompactG">
    </div>
    <div class="form-group">
        <label for="extendedBracketsG">Left stady view</label>
        <input class="form-control" type="checkbox" value="ExtendedBrackets" id="extendedBracketsG">
    </div>
    <div class="form-group">
        <label for="BeforeG">Comas before</label>
        <input class="form-control" type="checkbox" value="Before" id="BeforeG">
    </div>
    <div class="form-group">
        <label for="AfterG">Comas after</label>
        <input class="form-control" type="checkbox" value="After" id="AfterG">
        <div class="form-group">
            <label for="setTrimsAfterDotKomaG">Set trims after ;</label>
            <input class="form-control" type="checkbox" value="SetTrimsAfterDotKoma" id="setTrimsAfterDotKomaG">
        </div>
        <div class="form-group">
            <label for="setTrimsBeforeDotKomaG">Set trims before ;</label>
            <input class="form-control" type="checkbox" value="SetTrimsBeforeDotKoma" id="setTrimsBeforeDotKomaG">
        </div>
        <div class="form-group">
            <label for="removeTrimsG">Remove trims</label>
            <input class="form-control" type="checkbox" value="RemoveTrims" id="removeTrimsG">
        </div>
        <div class="form-group">
            <label for="removeEmptyLinesG">Remove empty lines</label>
            <input class="form-control" type="checkbox" value="RemoveEmptyLines" id="removeEmptyLinesG">
        </div>
        <div class="form-group">
            <label for="allVarsUpperCaseG">All variables upper case</label>
            <input class="form-control" type="checkbox" value="VarsUpper" id="allVarsUpperCaseG">
        </div>
        <div class="form-group">
            <label for="allVarsLowerCaseG">All variables lower case</label>
            <input class="form-control" type="checkbox" value="VarsLower" id="allVarsLowerCaseG">
        </div>
        <div class="form-group">
            <label for="varsUnderscoredG">All variables underscored</label>
            <input class="form-control" type="checkbox" value="VarsUnderscored" id="varsUnderscoredG">
        </div>
        <div class="form-group">
            <label for="toExtendedViewG">All variables to extended view</label>
            <input class="form-control" type="checkbox" value="ExtendedView" id="toExtendedViewG">
        </div>
        <div class="form-group">
            <label for="removeUnusedVarsG">Remove unused vars</label>
            <input class="form-control" type="checkbox" value="removeUnusedVars" id="removeUnusedVarsG">
        </div>
    </div>
</form>

我得到这个https://ibb.co/cqTqaT

我不知道这到底是怎么回事。请帮忙！

谢谢！

Answer 1

首先，您应该检查HTML结构和使用的类。

示例，您的以下代码：

<div class="col-md-12">
    <div class="form-group col-md-6" style="display: inline-block">
        <label for="defaultG">To default view </label>
        <input class="form-control" type="checkbox" value="Default" id="defaultG">
    </div>
    <div class="form-group col-md-6" style="display: inline-block">
        <p>Auto generated style due to common stylish rules.</p>
    </div>
</div>

创建一个内部有两个div的div，两个div的宽度均为50％。在第一个div中，有标签和复选框。在第二个div复选框旁边有您想要的文本。但这不适用于您的标记。

更好的是以下标记：

<div class="col-md-12">
  <div class="form-group">
    <label for="defaultG">To default view </label>
    <input class="form-control" type="checkbox" value="Default" id="defaultG">
    <p>Auto generated style due to common stylish rules.</p>
  </div>
</div>

如您所见，我删除了两个div，仅使用了一个表单组。使用以下简单CSS：

label{
  display: block;
}

p {
  display: inline-block;
}

您应该得到想要的结果。

渲染复选框

1 个答案: