Css 标签宽度无效

我有一个通用的表单，我想设计它的样式来对齐标签和输入字段。 由于某种原因，当我给标签选择器一个宽度时，什么也不会发生:

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

产出:

enter image description here

JsFiddle

我做错了什么？

142420 次浏览
小开

我相信标签是内联的，所以它们不需要宽度。也许可以尝试使用“ display: block”，然后从这里开始。

小开

使用 display: inline-block;

说明:

label是一个内联元素，这意味着它只能达到所需要的大小。

将 display属性设置为 inline-block或 block，以使 width属性生效。

例如:

#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>

小开

给出风格

display:inline-block;

希望这能有所帮助

小开

label的默认 display模式是 inline，这意味着它会根据内容自动调整大小。为了设置一个宽度，你需要设置 display:block，然后做一些修改，使它的位置正确(可能涉及到 float)

小开
最佳答案

做 display: inline-block:

#report-upload-form label {
padding-left:26px;
width:125px;
text-transform: uppercase;
display:inline-block
}

Http://jsfiddle.net/aqmn4/

小开

首先将其设置为一个块，然后向左浮动以停止将下一个块推入新行。

#report-upload-form label {
padding-left:26px;
width:125px;
text-transform: uppercase;
display:block;
float:left
}
小开 
   label
{
display: inline-block;
}

将给你的灵活性，以改变宽度的标签和自定义对齐的形式。干杯


提交答案