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 }
使用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>
首先将其设为块，然后向左浮动以停止将下一个块推入新行。
#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 ）
