css标签宽度不生效
css标签宽度不生效
提问于 2012-05-30 21:02:24
我有一个通用的表单，我想通过样式来对齐标签和输入字段。由于某些原因，当我给标签选择器一个宽度时，什么也没有发生：
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;
}输出：
我做错了什么？
回答 6
Stack Overflow用户
回答已采纳
发布于 2012-05-30 21:06:26
执行display: inline-block
#report-upload-form label {
padding-left:26px;
width:125px;
text-transform: uppercase;
display:inline-block
}Stack Overflow用户
发布于 2012-05-30 21:05:02
我相信标签是内联的，所以它们不会占用宽度。也许可以尝试使用"display: block“，然后从那里开始。
Stack Overflow用户
发布于 2012-05-30 21:09:08
首先将其设置为一个块，然后向左浮动以停止将下一个块推入新行。
#report-upload-form label {
padding-left:26px;
width:125px;
text-transform: uppercase;
display:block;
float:left
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10816853
复制相关文章
相似问题