0

CSS スタイルの 1 つを asp ラベルに適用すると、奇妙な結果が得られます。スタイルは実際には部分的な効果しかありません。たとえば、 や 色などの属性background-colorは有効で、幅や高さは有効ではありません。理由がわかりません。

ASP

 <div id="wrap">
<div id="left" class="Tablestyle">
<asp:Label ID="Label1" runat="server" Text="Entry Number: " class="Tablestyle"></asp:Label>
<br /><div class="separator">&nbsp;</div>
<asp:Label ID="Label3" runat="server" Text="ID Number: " class="Tablestyle"></asp:Label>
<br /><div class="separator">&nbsp;</div>
<asp:Label ID="Label2" runat="server" Text="Type: " class="Tablestyle"></asp:Label>

</div>
<div id="Mid">&nbsp</div>
<div id="right">
<asp:Label ID="IdBox" runat="server" class="TableStyleInfo"></asp:Label>
<br /><div class="separator">&nbsp;</div>
<asp:Label ID="IdNumBox" runat="server" class="TableStyleInfo"></asp:Label>
<br /><div class="separator">&nbsp;</div>
<asp:Label ID="TypeBox" runat="server" class="TableStyleInfo"></asp:Label>
</div>
</div>

CSS

#wrap
{
width:555px; 
margin:auto;
text-align:center;
}

 #Mid
{
width:5px;
height:330px;
float:left;
background-color:White;
}

#right
{
width:400px;
float:left;
text-align:left;
background-color:Yellow;
}

#left
{
width:150px;
float:left;
text-align:right;
background-color:Green;
}

 .separator
{
height:4px;
line-height:4px;
background-color:White;
}

.Tablestyle
{
width:150px;
height:20px;
text-align:right;
color:white;
font-weight:bold;
background-color:#507CD1;   
 }

.TableStyleInfo
 {
width:400px;
height:20px;
text-align:left;
color:Black;
background-color:#EFF3FB;
}

私も変更しようとしclassましCssClassたが、同じことは何も起こりません。

誰かが私の間違いを指摘したり、幅と高さのプロパティを適用できない理由を教えてくれたりすると、とても感謝しています。

4

1 に答える 1

1

は、インライン要素であり、幅も高さも持たない<asp:Label>html 要素に変換されます。<span>css でブロック レベル要素に変更することで、これを強制できます。

.Tablestyle {
    display: block; // add this
    width: 150px;
    height: 20px;
    text-align: right;
    color: white;
    font-weight: bold;
    background-color: #507CD1;
}

.TableStyleInfo {
    display: block; // add this
    width: 400px;
    height: 20px;
    text-align: left;
    color: Black;
    background-color: #EFF3FB;
}
于 2013-09-30T03:21:18.857 に答える