字段集的上边框未显示答案

【问题标题】：fieldset's top border not showing up字段集的上边框未显示
【发布时间】：2017-07-13 19:29:41
【问题描述】：

我的 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;
}

【问题讨论】：

标签： html css asp.net

【解决方案1】：

试试这个

css

 <style>
.verticalLine {
  border-left: thick solid #ff0000;
            height: 143px;
        }
    .labels {
    font-size:9pt;
    font-weight:bold;
    font-family:Calibri;
}

section {
    width: 95%;
    height: 200px; 
    margin: auto;
    padding: 10px;
}
div#one {
    width: 45%;
    height: 200px; 

}
div#two  
{
     width: 45%;
    height: 200px; 
    float: right;
}
    </style>

HTML

<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>
                                <table border="1">
                                <tr>
                                <td>
                                 <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 ID="TextBox5" 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 ID="TextBox6" runat="server" Width="90px" Height="23px"></asp:TextBox>
                                            </asp:TableCell>
                                        </asp:TableRow>
                                        <asp:TableRow>
                                            <asp:TableCell Style="width: 10%;">
                                                   Project ID: 
                                                   <asp:TextBox ID="TextBox7" 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 ID="TextBox8" runat="server" Width="90px" Height="23px"></asp:TextBox>
                                            </asp:TableCell>
                                        </asp:TableRow>
                                    </asp:Table>
                                </div>
                                </td>
                                <td>
                                 <div class="verticalLine">

</div>
                                </td>
                                <td>
                                    <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 ID="TextBox1" 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 ID="TextBox2" runat="server" Width="90px" Height="23px"></asp:TextBox>
                                            </asp:TableCell>
                                        </asp:TableRow>
                                        <asp:TableRow>
                                            <asp:TableCell Style="width: 10%;">
                                                   Project ID: 
                                                   <asp:TextBox ID="TextBox3" 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 ID="TextBox4" runat="server" Width="90px" Height="23px"></asp:TextBox>
                                            </asp:TableCell>
                                        </asp:TableRow>
                                    </asp:Table>
                                </div>
                                </td>
                                </tr>
                                </table>





                            </fieldset>
                        </div>

                        </div>

                    </section>

【讨论】：

另一个 div 隐藏了 div 一个边框，如果上面有任何内容，请删除并检查...字段集没有问题
我有一个
和
后跟上面的代码。我尝试删除它，但问题仍然存在。
当我改变显示：块；显示：内联；在 fieldset css 中，我可以看到边框，但图例出现在 fieldset 的一侧。
我猜不支持在 jsfiddle 中的 asp 标签，因为您看不到文本框。它的行为与 asp 标签略有不同。
您的问题是否也仅存在于字段集顶部边框或文本框边框？

【解决方案2】：

图例需要宽度：auto。这解决了问题。

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

【讨论】：

真的很高兴能帮上忙，因为我也为此发疯了。

【解决方案3】：

将 width: auto 添加到样式表。这样就解决了。

width:auto;

【讨论】：

到哪个 css elem？