将 css 样式应用于 Asp.net 标签 (c#) 。我究竟做错了什么?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9463034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Applying a css style to Asp.net label (c#) . What am i doing Wrong?
提问by dragonmnl
I've a code like this:
我有这样的代码:
<div id = "part1">
<asp:Label id = "label1" CssClass="labels" runat="server" Text="label1" />
<asp:TextBox id = "textBox1" runat="server" Text="test1" />
<br />
<asp:Label id = "label2" CssClass="labels" runat="server" Text="label2" />
<asp:TextBox id = "textBox2" " runat="server" Text="test2" />
</div>
<div id = "part2">
<asp:Label id = "label3" CssClass="labels" runat="server" Text="label3" />
<asp:TextBox id = "textBox3" runat="server" Text="test3" />
<br />
<asp:Label id = "label4" CssClass="labels" runat="server" Text="label4" />
<asp:TextBox id = "textBox4" runat="server" Text="test4" />
</div>
<div id = "part3">
<asp:Label id = "label5" CssClass="labels" runat="server" Text="label5" />
<asp:TextBox id = "textBox5" runat="server" Text="test5" />
<br />
<asp:Label id = "label6" CssClass="labels" runat="server" Text="label6" />
<asp:TextBox id = "textBox6" runat="server" Text="test6" />
</div>
with the following CSS associated:
与以下 CSS 相关联:
.part1
{
float:left;
width: 300px;
}
.part2
{
float:left;
width: 300px;
}
.part3
{
float:left;
width: 300px;
}
.labels
{
width: 150px;
}
My goal is: - to have 3 columns of width = 300px; - in columns (for each line): one label and one textbox - Every label should be always with width = 150px to have textbox at same position
我的目标是: - 有 3 列宽度 = 300px; - 在列中(对于每一行):一个标签和一个文本框 - 每个标签应始终具有宽度 = 150px 以使文本框位于同一位置
It seams the columns float well (I can see three different columns) but label just adapt to their content.
它缝合列浮动良好(我可以看到三个不同的列)但标签只是适应它们的内容。
What I'm doing wrong?
我做错了什么?
Thank you
谢谢
采纳答案by wheresrhys
You can't set width on inline elements, so use this
你不能在内联元素上设置宽度,所以使用这个
.labels
{
width: 150px;
display:inline-block;
}
Although you have a problem because the inputs won't adjust their width automatically, so you also need
虽然你有一个问题,因为输入不会自动调整它们的宽度,所以你还需要
.part1 input, .part2 input, .part3 input {
width: 150px;
display:inline-block;
}
And you may also need to adjust the width settings if you're using padding/margin/border on your input or label
如果您在输入或标签上使用填充/边距/边框,您可能还需要调整宽度设置

