繁体   English   中英

无法将CSS样式应用于asp标签

[英]Unable to apply CSS style to an asp label

当我想将我的一种CSS样式应用于asp标签时,我得到了一个奇怪的结果。 样式实际上仅具有部分作用,例如, background-color和颜色之类的属性生效,而宽度和高度的属性则无效。 我不明白为什么。

均价

 <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但没有发生任何变化。

如果有人可以指出我的错误或提示我为什么不能应用width和height属性,我将不胜感激。

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

将 CSS 样式应用于<div></div><div id="text_translate"><p>我的问题是下面的 html</p><pre> &lt;div class="editor-container"&gt; &lt;div class="editor-row curFocus"&gt; &lt;div class="editor-label"&gt; &lt;label for="FirstName"&gt;First Name&lt;/label&gt; &lt;/div&gt; &lt;div class="editor-field"&gt; &lt;input class="text-box single-line valid" id="FirstName" name="FirstName" type="text" value="Nancy" maxlength="20"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre><p> 当用户选择输入字段时,我通过一些 javascript 将 class "curFocus" 添加到外部 div 以突出显示 label 和输入字段。</p><p> 我的 css 是 -</p><pre> .editor-container { border: thin solid #444444; display: table; width: 100%; }.editor-row { width: 100%; display: table-row; }.editor-label { padding-left: .4em; width: 40%; }.editor-label, .editor-field { padding-right: .4em; padding-bottom: .2em; padding-top: .2em; display: table-cell; }.curFocus { border: 2px solid #05365b; background-color: #d3e5f2; margin: 3px; padding: 3px; }</pre><p> 我的问题是,在 Chrome 12 和 IE9 中使用调试器时,它们都显示了应用于外部 div 的边框设置。 但是,在查看表单时,浏览器都不会显示指定的边框。 所有其他 css 设置工作正常。 我还尝试将“.curFocus”的定义更改为“.curFocus div”。 但这也将样式应用于每个嵌套的 div,但确实在所有 div 上显示了边框。</p><p> 虽然我不是 CSS 专家,但不清楚为什么这不起作用。</p><hr><p> 编辑这里是 jsfiddle 链接 - <a href="http://jsfiddle.net/photo_tom/KmsF5/1/" rel="nofollow">http://jsfiddle.net/photo_tom/KmsF5/1/</a> 。 在进行测试时,如果在 IE7 兼容模式下,它确实可以在 IE9 中正常工作。 否则,它不能正确显示。 很抱歉不包括链接,仍然习惯了 jsfiddle 甚至存在的事实。</p></div>

[英]Apply CSS style to <div>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将CSS样式应用于ASP内容 无法将CSS应用于我的ASP:Label 无法将CSS样式应用于SVG文本元素 无法将CSS PIE样式应用于IE。* 嵌入CSS样式,活动超链接位于<asp: Label> 无法将CSS样式应用于列表内 如何将 CSS 样式应用于 Div 的兄弟标签字段? 无法应用SASS样式 无法应用CSS样式 将 CSS 样式应用于<div></div><div id="text_translate"><p>我的问题是下面的 html</p><pre> &lt;div class="editor-container"&gt; &lt;div class="editor-row curFocus"&gt; &lt;div class="editor-label"&gt; &lt;label for="FirstName"&gt;First Name&lt;/label&gt; &lt;/div&gt; &lt;div class="editor-field"&gt; &lt;input class="text-box single-line valid" id="FirstName" name="FirstName" type="text" value="Nancy" maxlength="20"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre><p> 当用户选择输入字段时,我通过一些 javascript 将 class "curFocus" 添加到外部 div 以突出显示 label 和输入字段。</p><p> 我的 css 是 -</p><pre> .editor-container { border: thin solid #444444; display: table; width: 100%; }.editor-row { width: 100%; display: table-row; }.editor-label { padding-left: .4em; width: 40%; }.editor-label, .editor-field { padding-right: .4em; padding-bottom: .2em; padding-top: .2em; display: table-cell; }.curFocus { border: 2px solid #05365b; background-color: #d3e5f2; margin: 3px; padding: 3px; }</pre><p> 我的问题是,在 Chrome 12 和 IE9 中使用调试器时,它们都显示了应用于外部 div 的边框设置。 但是,在查看表单时,浏览器都不会显示指定的边框。 所有其他 css 设置工作正常。 我还尝试将“.curFocus”的定义更改为“.curFocus div”。 但这也将样式应用于每个嵌套的 div,但确实在所有 div 上显示了边框。</p><p> 虽然我不是 CSS 专家,但不清楚为什么这不起作用。</p><hr><p> 编辑这里是 jsfiddle 链接 - <a href="http://jsfiddle.net/photo_tom/KmsF5/1/" rel="nofollow">http://jsfiddle.net/photo_tom/KmsF5/1/</a> 。 在进行测试时,如果在 IE7 兼容模式下,它确实可以在 IE9 中正常工作。 否则,它不能正确显示。 很抱歉不包括链接,仍然习惯了 jsfiddle 甚至存在的事实。</p></div>
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM