CSS标签宽度不起作用 [英] css label width not taking effect
本文介绍了CSS标签宽度不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个通用表单，我想用它来对齐标签和输入字段。
由于某些原因，当我给标签选择器添加一个宽度时，没有任何反应：
HTML：
< form id =report-upload-formmethod =POSTaction =enctype =multipart / form-data>
< p>
< label for =id_title>标题：< / label>
< input id =id_titletype =textclass =input-textname =title>< / p>
< p>
< label for =id_description>说明：< / label>
< p>
< label for =id_report>上传报告：< / label>
< input id =id_reporttype =fileclass =input-filename =report>
< / p>
< / form>
CSS：
＃report-upload-form {
background-color：＃316091;
颜色：＃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：大写;
}
＃report-upload-form input [type = text]，
＃report-upload-form input [type = file]，
＃report- upload-form textarea {
width：305px;
}
输出：
我在做什么错误？
解决方案 >
＃report-upload-form label {
padding-left：26px;
width：125px;
text-transform：大写;
display：inline-block
}
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:
<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:
#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?
解决方案
Do display: inline-block:
#report-upload-form label {
padding-left:26px;
width:125px;
text-transform: uppercase;
display:inline-block
}
这篇关于CSS标签宽度不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
