HTML-如何指定输入和跨度标签的布局？答案

【问题标题】：HTML- how do I specify the layout of input & span tags?HTML-如何指定输入和跨度标签的布局？
【发布时间】：2017-07-17 21:28:57
【问题描述】：

在我的网站上，我点击“保存”按钮，单击该按钮会打开一个对话框。该对话框显示有关正在保存的页面的一些信息，我还刚刚添加了一个复选框，以允许用户指定他们希望该页面成为该站点的“主页”页面。即选中该框并单击对话框上的“保存”按钮后，他们当前正在查看的页面将被设置为“主页”页面，因此每当他们单击站点上的“主页”按钮时，他们将被带到此页面而不是默认页面。

此功能目前有效，我现在只是尝试整理演示文稿/布局，使其与对话框的其余部分保持一致。

HTML 是：

<div data-ng-show="layout.style == 'grid'">
    <div class="divider"></div>
    <div class="row">
        <div class="col-sm-4 col-xs-4">
            <label data-i18n="Direction:"></label>
        </div>
        <div class="col-sm-8 col-xs-8">{{layout.direction}}</div>
    </div>
</div>
<div class="divider"></div>
<div class="row">
    <div class="col-sm-4 col-xs-4">
        <label data-i18n="Homepage:"></label>
    </div>
    <div class="col-sm-10 checkbox">
        <label class="checkbox">
            <input name="homepageCheckbox" type="checkbox"
                ng-model="checkboxModel">
            <span data-i18n="Set this page as the home page"></span>
        </label>
    </div>
</div>

但是，由于某种原因，我为其添加的复选框的布局和描述与对话框上显示的其他所有内容不同：

我希望复选框和描述与“主页”标签内联显示，就像所有其他项目一样...我猜这已显示在新行上的原因可能是因为文本的宽度对于对话框来说太长了？

我如何指定我希望复选框和描述文本与“主页”标签一致显示，并显示其他非标签元素，即使这样做需要两行？

编辑

我尝试了答案中给出的建议——虽然这解决了布局的“列”问题，但并没有解决“行”问题——即文本现在被限制在正确的列中，但对于某些人来说原因，它似乎仍然显示在标签的单独行上：

【问题讨论】：

标签： html page-layout

【解决方案1】：

您似乎有 12 列布局，但在最后一行使用了 14 列指令。

<div class="col-sm-4 col-xs-4">
        <label data-i18n="Homepage:"></label>
    </div>
    <div class="col-sm-10 checkbox"> <!-- should be col-sm-8 -->
        <label class="checkbox">
            <input name="homepageCheckbox" type="checkbox"
                ng-model="checkboxModel">
            <span data-i18n="Set this page as the home page"></span>
        </label>
    </div>

所以总的来说试试这个：

<div data-ng-show="layout.style == 'grid'">
    <div class="divider"></div>
    <div class="row">
        <div class="col-sm-4 col-xs-4">
            <label data-i18n="Direction:"></label>
        </div>
        <div class="col-sm-8 col-xs-8">{{layout.direction}}</div>
    </div>
</div>
<div class="divider"></div>
<div class="row">
    <div class="col-sm-4 col-xs-4">
        <label data-i18n="Homepage:"></label>
    </div>
    <div class="col-sm-8 checkbox">
        <input name="homepageCheckbox" type="checkbox"
                ng-model="checkboxModel">
        <span data-i18n="Set this page as the home page"></span>
    </div>
</div>

【讨论】：

感谢您的回答。我试了一下，它已经解决了最初的问题——复选框和描述文本现在与对话框的其他“非标签”元素一致，并显示在两行上……但是由于某种原因，它们显示在“主页”标签下方的一行 - 即它们不符合它...任何想法为什么会这样？
啊，好像是因为我在<div class...> 里面多了一个<label class="checkbox"> 标签
@someone2088 很好地发现了这一点。我也会编辑答案。

【解决方案2】：

您已将 col-sm-4 分配给标签的父 div 并将 col-sm-10 分配给复选框的父 div。

Bootstrap 仅将页面分为 12 列。所以这两个 div 的列的总和不应超过 12。将复选框的父 div 类设为col-sm-8，就像你给方向一样。

【讨论】：

感谢您的回答-我这样做了，它已经对列的问题进行了排序-复选框和文本现在与页面的其他“非标签”元素一致，但是对于出于某种原因，这使复选框和描述比标签低了一行，而不是在一行中……我怎样才能让它们显示在同一行？
那是因为 bootstrap 的复选框类的 margin-top 为 10px；将其覆盖为 0px
.checkbox { margin-top: 0px; }
你能检查元素看看它是否被其他东西覆盖
否则给出重要的并勾选 .checkbox { margin-top: 0px !important; }

【解决方案3】：

<div data-ng-show="layout.style == 'grid'">
        <div class="divider"></div>
        <div class="row">
            <div class="col-sm-4 col-xs-4">
                <label data-i18n="Direction:"></label>
            </div>
            <div class="col-sm-8 col-xs-8">{{layout.direction}}</div>
        </div>
    </div>
    <div class="divider"></div>
    <div class="row">
        <div class="col-sm-4 col-xs-4">
            <label data-i18n="Homepage:"></label>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-10 checkbox">
            <label class="checkbox">
            <input name="homepageCheckbox" type="checkbox"
                ng-model="checkboxModel">
            <span data-i18n="Set this page as the home page"></span>
        </label>
        </div>
    </div>

【讨论】：