fieldset的顶部边框没有显示

我在下面的代码在我的html/css中。我正在寻找这样的设计： fieldset的顶部边框没有显示

我用这个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; 
}

来源

2017-02-23 Sak

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

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

来源

2017-02-23 11:55:45 Sak

我一直在寻找这个。谢谢！！！ – heat222

真的很高兴，帮助因为我也疯了。 – Sak

试试这个

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>

来源

2017-02-23 11:05:12

nope。不工作。 – Sak

另一个div是隐藏div的一个边框，如果上面有任何东西请删除并检查...有没有问题在字段集 – 2017-02-23 11:18:17

我有一个

和
后面是上述代码。我试图删除它，但问题仍然存在。 – Sak

fieldset的顶部边框没有显示

回答

相关问题