如何设置样式的宽度以匹配外部DIV

时间:2014-12-17 16:19:23

标签: html css asp.net list

使用JQuery标签,我的div中有2个标签,Info & Images

<ul>的内容包含2个标签,ul为蓝色。但是OnCLickk="ViewFeatureWorkflowImagePostBackBtn_Click"返回一个表。

如果表的内容比updatePanel宽度(300)宽,则会出现滚动条,允许用户查看表的其余部分,调整更新面板的宽度,从而不显示其余的蓝色的ul。

所以iv尝试将ul的宽度设置为100%,但我会填充外部div ...没有工作......有什么想法?

 <asp:UpdatePanel runat="server" ID="UpdatePanel8" UpdateMode="Conditional" ChildrenAsTriggers="true"
           Style="position: relative; overflow: hidden; background-color: White;               
          width: 300px; height: 300px; margin: 5px; text-align: center; outline-style: none; overflow-y: hidden; overflow-x:hidden;">
           <%--width: 500px; height: 450px; --%>

           <ContentTemplate>
                   <div id="DivHolding2Tabs" class="overflowcontent" style="border-color:Black;border-width:1px;border-style:solid;">

                       <ul id="tabList" style="width:inherit;">
                           <li><a href="#tabs-1">Info</a> </li>
                           <li><a href="#tabs-2" style="display:none;">Images</a> </li>

                       </ul>

                       <div id="tabs-1" class="WorkFlowLayout">
                               <b><font color="FF6600">Feature Properties </font></b>
                                <div id="divFeatureInfo" runat="server">
                                </div>
                       </div>

                       <div id="tabs-2" class="WorkFlowLayout">
                                <b><font color="FF6600">Images</font></b>
                                <div id="ImagesRelatingToFeatureDIV" runat="server">  
                               </div>
                       </div>
                   </div>
                   <br />
                   <br />
                   <div class="buttonwrap">
                       <span id="Span5" class="ActionBtns">
                           <asp:Button ID="ViewFeatureWorkflowImagePostBackBtn" runat="server" Style="display: none;
                               visibility: hidden;" OnClick="ViewFeatureWorkflowImagePostBackBtn_Click" />
                       </span>
                   </div>
           </ContentTemplate>
           <Triggers>
               <asp:AsyncPostBackTrigger ControlID="ViewFeatureWorkflowImagePostBackBtn" EventName="Click" />
           </Triggers>
       </asp:UpdatePanel>

enter image description here enter image description here

2 个答案:

答案 0 :(得分:1)

div内添加额外的换行.overflowcontent。标签div.overflowcontent不应相同。

<div class="overflowcontent">
    <div id="DivHolding2Tabs">
        <!-- tabs -->
    </div>
</div>

答案 1 :(得分:0)

看起来ul不是唯一的问题。试试这个。

ul, .WorkFlowLayout, .overflowcontent {
   width: 100%!important;
}