Question

我的html / css中有以下代码。我正在寻找这样的设计：

我使用这个http://jsfiddle.net/watson/Gsj27/3/小提琴来分割字段集。 但我无法显示该字段集的顶部边框。

<section style="width: 95%;">
   <div id="one">
      <fieldset style="border: solid; border-width: thin; height: 200px; border-color: #a8a8a8;">
         <legend id="Legend10" runat="server" visible="true" style="margin-bottom: 0px; font-size: 12px; font-weight: bold; color: #1f497d;">&nbsp;&nbsp; Project Summary &nbsp;&nbsp;</legend>
         <div style="margin-bottom: 10px; margin-left: 10px;">
         <asp:Table ID="table10" runat="server" CssClass="labels">
            <asp:TableRow>
               <asp:TableCell Style="width: 10%;">
                  Project ID: 
                  <asp:TextBox runat="server" Width="25px" Height="23px"></asp:TextBox>
               </asp:TableCell>
               <asp:TableCell Style="width: 40%;">
                  Project Name:<sup style="color:red; font-size:10pt;">*q</sup> 
                  <asp:TextBox runat="server" Width="90px" Height="23px"></asp:TextBox>
               </asp:TableCell>
            </asp:TableRow>
            <asp:TableRow>
               <asp:TableCell Style="width: 10%;">
                  Project ID: 
                  <asp:TextBox runat="server" Width="25px" Height="23px"></asp:TextBox>
               </asp:TableCell>
               <asp:TableCell Style="width: 40%;">
                  Project Name:<sup style="color:red; font-size:10pt;">*q</sup> 
                  <asp:TextBox runat="server" Width="90px" Height="23px"></asp:TextBox>
               </asp:TableCell>
            </asp:TableRow>
         </asp:Table>
         </div>
      </fieldset>
   </div>
   <div id="two">
      <fieldset style="border: solid; border-width: thin; height: 200px; border-color: #a8a8a8;">
         <legend id="Legend5" runat="server" visible="true" style="margin-bottom: 0px; font-size: 12px; font-weight: bold; color: #1f497d;"></legend>
         <div style="margin-bottom: 10px; margin-left: 10px;">
            <asp:Table ID="table11" runat="server" CssClass="labels">
               <asp:TableRow>
                  <asp:TableCell Style="width: 10%;">
                     Project ID: 
                     <asp:TextBox runat="server" Width="25px" Height="23px"></asp:TextBox>
                  </asp:TableCell>
                  <asp:TableCell Style="width: 40%;">
                     Project Name:<sup style="color:red; font-size:10pt;">*q</sup> 
                     <asp:TextBox runat="server" Width="90px" Height="23px"></asp:TextBox>
                  </asp:TableCell>
               </asp:TableRow>
               <asp:TableRow>
                  <asp:TableCell Style="width: 10%;">
                     Project ID: 
                     <asp:TextBox runat="server" Width="25px" Height="23px"></asp:TextBox>
                  </asp:TableCell>
                  <asp:TableCell Style="width: 40%;">
                     Project Name:<sup style="color:red; font-size:10pt;">*q</sup> 
                     <asp:TextBox runat="server" Width="90px" Height="23px"></asp:TextBox>
                  </asp:TableCell>
               </asp:TableRow>
            </asp:Table>
         </div>
      </fieldset>
   </div>
</section>

CSS：

.labels {
    font-size:9pt;
    font-weight:bold;
    font-family:Calibri;
}

section {
    width: 95%;
    height: 200px; 
    margin: auto;
    padding: 10px;
}
div#one {
    width: 47%;
    height: 200px; 
    float: left;
}
div#two { 
    height: 200px; 
}
fieldset legend {
    display: block;
    margin-left: 20px;
}

Answer 1

图例需要宽度：自动。这解决了这个问题。

 <legend id="Legend5" runat="server" visible="true" style="width:auto; margin-bottom: 0px; font-size: 12px; font-weight: bold; color: #1f497d;">

Answer 2

添加宽度：自动添加到样式表。这样就可以解决。

width:auto;

fieldset的顶部边框没有显示出来

2 个答案: