Html css标签宽度不生效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10816853/
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
css label width not taking effect
提问by TheOne
I have a generic form, which I'd like to style to align the labels and the input fields. For some reason when I give a width to the label selector, nothing happens:
我有一个通用表单，我想对其进行样式设置以对齐标签和输入字段。出于某种原因，当我为标签选择器指定宽度时，没有任何反应：
HTML:
HTML：
<form id="report-upload-form" method="POST" action="" enctype="multipart/form-data">
<p>
<label for="id_title">Title:</label>
<input id="id_title" type="text" class="input-text" name="title"></p>
<p>
<label for="id_description">Description:</label>
<textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
<p>
<label for="id_report">Upload Report:</label>
<input id="id_report" type="file" class="input-file" name="report">
</p>
</form>
CSS:
CSS：
#report-upload-form {
background-color: #316091;
color: #ddeff1;
font-weight:bold;
margin: 23px auto 0 auto;
border-radius:10px;
width: 650px;
box-shadow: 0 0 2px 2px #d9d9d9;
}
#report-upload-form label {
padding-left:26px;
width:125px;
text-transform: uppercase;
}
#report-upload-form input[type=text],
#report-upload-form input[type=file],
#report-upload-form textarea {
width: 305px;
}
Output:
输出：
What am I doing wrong?
我究竟做错了什么？
回答by Davis
Do display: inline-block:
做display: inline-block：
#report-upload-form label {
padding-left:26px;
width:125px;
text-transform: uppercase;
display:inline-block
}
回答by webdevkit
Use display: inline-block;
用 display: inline-block;
Explanation:
解释：
The labelis an inline element, meaning it is only as big as it needs to be.
Thelabel是一个内联元素，这意味着它只有需要的大小。
Set the displayproperty to either inline-blockor blockin order for the widthproperty to take effect.
将该display属性设置为inline-block或block以使该width属性生效。
Example:
例子：
#report-upload-form {
background-color: #316091;
color: #ddeff1;
font-weight: bold;
margin: 23px auto 0 auto;
border-radius: 10px;
width: 650px;
box-shadow: 0 0 2px 2px #d9d9d9;
}
#report-upload-form label {
padding-left: 26px;
width: 125px;
text-transform: uppercase;
display: inline-block;
}
#report-upload-form input[type=text],
#report-upload-form input[type=file],
#report-upload-form textarea {
width: 305px;
}<form id="report-upload-form" method="POST" action="" enctype="multipart/form-data">
<p><label for="id_title">Title:</label> <input id="id_title" type="text" class="input-text" name="title"></p>
<p><label for="id_description">Description:</label> <textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
<p><label for="id_report">Upload Report:</label> <input id="id_report" type="file" class="input-file" name="report"></p>
</form>回答by Mike
I believe labels are inline, and so they don't take a width. Maybe try using "display: block" and going from there.
我相信标签是内联的，所以它们不占用宽度。也许尝试使用“显示：块”并从那里开始。
回答by ctrl-alt-dileep
Make it a block first, then float left to stop pushing the next block in to a new line.
首先将其设为一个块，然后向左浮动以停止将下一个块推入新行。
#report-upload-form label {
padding-left:26px;
width:125px;
text-transform: uppercase;
display:block;
float:left
}
回答by Philemon philip Kunjumon
give the style
给风格
display:inline-block;
hope this will help'
希望这会有所帮助'
回答by n00dle
label's default displaymode is inline, which means it automatically sizes itself to it's content. To set a width you'll need to set display:blockand then do some faffing to get it positioned correctly (probably involving float)
label的默认display模式是inline，这意味着它会根据内容自动调整大小。要设置宽度，您需要设置display:block然后进行一些处理以使其正确定位（可能涉及float）
