CSS标签宽度不起作用

我有一个通用的forms,我想风格来alignment标签和input字段。 由于某种原因,当我给标签select器的宽度,没有任何反应:

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

输出:

在这里输入图像说明

我究竟做错了什么?

display: inline-block

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

http://jsfiddle.net/aqMN4/

使用display: inline-block;

说明:

label是一个内联元素,意味着它只有它所需要的那么大。

display属性设置为inline-blockblock ,以使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> 

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

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

我相信标签是内联的,所以他们不占用宽度。 也许尝试使用“显示:块”,并从那里去。

给风格

 display:inline-block; 

希望这将有助于'

label的默认display模式是inline ,这意味着它会自动将其内容大小。 要设置一个宽度,你需要设置display:block ,然后做一些faffing来正确定位(可能涉及float