Question

我只想让我的listboc扩展整个屏幕宽度，在此图片中

因此，文本＆＃34下的突出显示的列表框;选择或双击....＆＃34;是不扩展整个屏幕宽度的那个。

标记

<div class="row" style="margin-left: 5px; margin-right: 5px; margin-top:10px;" id="divCommentBank">
    <div class="table">
        <div class="row" style="margin-top:0px; padding-top:0px;">
            <div class="col-xs-5" style="width:200px; border:groove; margin-left: 20px">
                <label style="width:100%">Comment Categories</label>
                @Html.ListBoxFor(m => m.cM.CategoryList, new SelectList(Model.cM.CategoryList, "CategoryID", "Description"), new { @id = "listCommentCategory", @style = "height:168px; margin-top:5px; margin-bottom: 5px; width:190px" })

            </div>
            <div style="float: right; width:900px; border:groove; margin-right: 20px">
                <div class="row" style="margin-top:5px; padding-top:0px;">
                    <div class="col-xs-4" style=" margin-left: 5px">
                        @Html.DropDownListFor(m => m.cM.HeaderList, new SelectList(Model.cM.HeaderList, "CommentID", "Comment"), new { @id = "ddlCommentHeaders", @style="width: 100%" })
                    </div>
                    <div class="col-xs-4">
                        Search:
                        @Html.TextBox("txtSearchHeader")
                        <button id="clear">X</button>
                    </div>
                    <div class="col-xs-1">
                        <button id="refresh">Refresh</button>
                    </div>
                </div>
                <div class="row" >
                    <div style="margin-left:5px" class=" col-xs-9">
                        Select or double-click on a comment to insert:
                    </div>
                </div>
                <div class="row" style="margin-top:5px">
                    <div style="margin-left:5px; " class=" col-xs-9">
                        @Html.ListBoxFor(m => m.cM.CommentsList, new SelectList(Model.cM.CommentsList, "CommentID", "Comment"), new { @id = "listComments", @style = "height:105px; margin-bottom:5px;" })
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

更新

添加显示后：内联或显示：内联块到3行中的每一行并设置宽度：100％现在图像为

Answer 1

您可以尝试将以下属性添加到列表框的父div吗？

display：inline或display：inline-block

<div class="row" style="margin-top:5px;display:inline;">
                <div style="margin-left:5px; " class=" col-xs-9">
                    @Html.ListBoxFor(m => m.cM.CommentsList, new SelectList(Model.cM.CommentsList, "CommentID", "Comment"), new { @id = "listComments", @style = "height:105px; margin-bottom:5px;" })
                </div>

OR

  <div class="row" style="margin-top:5px;display:inline-block;">
                <div style="margin-left:5px; " class=" col-xs-9">
                    @Html.ListBoxFor(m => m.cM.CommentsList, new SelectList(Model.cM.CommentsList, "CommentID", "Comment"), new { @id = "listComments", @style = "height:105px; margin-bottom:5px;" })
                </div>

Answer 2

为每个display: inline-block

添加.row属性

Answer 3

默认情况下，select元素通常是一个内联块元素您是否尝试在ListBox样式中设置[ 'label' => 'Bank Account', 'attribute' => 'bank_account', 'visible' => function ($data) { if ($data->visible == 'Y') { return '1'; // or return true; // for visible } else { return '0'; // or return false; // for hide } }, ],？

div是全宽但内部的列表框不会展开

3 个答案: