Question

我对HTML一无所知，我有一个包含标签，文本框和Dropbox的页面。我有这个代码

<div class="col-xl-4 col-lg-6">
    <label for="JobLineJob_StatusId">Status:</label>
    @Html.DropDownListFor(model => model.JobLineJob.StatusId, Model.JobLineStatusList, "-- Select One --")
</div>

当我进入页面时是具有这种布局的（我无法放置图片，因为根据堆栈溢出，我缺少这些点）

状态：

（下拉列表）

我不希望下拉列表位于标签下方，我希望它位于标签的右侧并与之对齐。

状态：（下拉列表）

我尝试过编写这样的代码

<div class="col-xl-4 col-lg-6">
    <label for="JobLineJob_StatusId">Status: @Html.DropDownListFor(model => model.JobLineJob.StatusId, Model.JobLineStatusList, "-- Select One --")</label>                        
</div>

，我也尝试了其他一些方法，但是所有没有导致错误的方法都为我提供了与原始代码相同的布局。我也不了解CSS，所以不知道如何解决这个问题。

Answer 1

由于您似乎正在使用Bootstrap，因此我只需在当前列中添加另一行/列。

它看起来像这样：

<div class="col-xl-4 col-lg-6">
    <div class="row">
        <div class="col-sm-6">
            <label for="JobLineJob_StatusId">Status:</label>
        </div>
        <div class="col-sm-6">
            @Html.DropDownListFor(model => model.JobLineJob.StatusId, Model.JobLineStatusList, "-- Select One --")
        </div>
    </div>
</div>

此方法也应适用于响应式...如果您不希望这样，则两列将堆积在移动设备上，然后将它们分别更改为col-xs-6

在标签旁边放置HTML帮助器

1 个答案: