1. 首页
  2. 问答
  3. 格是全宽，但列表框里面会不会扩大

格是全宽，但列表框里面会不会扩大

2017-06-13 35 views
0

我只是希望我的listboc扩大屏幕的整个宽度，这种形象格是全宽，但列表框里面会不会扩大

enter image description here

所以在文本高亮显示的列表框中的“选择或一倍单击....“是不扩展屏幕的整个宽度的那个。内联或显示：内联块到每个3行和设置宽度：

标记

<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>

UPDATE

添加显示后100％现在的图像是enter image description here

enter image description here

enter image description here

来源

2017-06-13 Samra

+0

你能告诉我们一个演示链接，或codepen –

+0

“@ Html.ListBoxFor（）'生成的实际HTML是什么？什么是'row'和'col-xs-9'类？有没有其他可以应用于该元素的CSS？ – nnnnnn

回答

0

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

显示：内联或显示：内联块

<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>

来源

2017-06-13 04:24:44 GaAd

+0

我已经添加style =“display：inline”到3行中的每一行并设置宽度：100％..但宽度相同。尽管每行的页边距有一些变化 – Samra

+1

max-width：100％。这可能有帮助，我认为有些父元素覆盖你的CSS。你可以运行开发人员的工具和dom资源管理器，以找到确切的CSS在该列表框？ – GaAd

+0

是的，我附上了快照 – Samra

0

添加display: inline-block属性到每个.row

来源

2017-06-13 04:28:28 Ethernetz

+0

请参阅更新的图像 – Samra

0

的选择元件通常是由一个内联块元件默认。
您是否尝试过在列表框样式中设置width: 100%;？

来源

2017-06-13 04:32:57

+0

不要选择通常默认显示最长选项文本所需的宽度的元素？ – nnnnnn

相关问题

 相关问题