css标签宽度不生效答案

【问题标题】：css label width not taking effectcss标签宽度不生效
【发布时间】：2012-06-04 17:19:18
【问题描述】：

我有一个通用表单，我想对其进行样式设置以对齐标签和输入字段。出于某种原因，当我为标签选择器指定宽度时，什么也没有发生：

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

输出：

jsFiddle

我做错了什么？

【问题讨论】：

顺便说一句，用<p>标签包裹表单部分真的是个好主意吗？

标签： html css label

【解决方案1】：

做display: inline-block:

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

http://jsfiddle.net/aqMN4/

【讨论】：

坚持使用内联块。在IE7,IE8,IE9,FF中测试过
是否有解决方法将每个元素放在
中？
@ColinD 我建议使用 div，而不是
标签。

【解决方案2】：

使用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>

【讨论】：

谢谢！ inline-block 是我需要的。块让它看起来很奇怪。
请注意，inline-block 的支持在 IE8 以下的 IE 中是粗略的——这些天可能不是太大的问题，但要记住一些事情。（来源quirksmode.org/css/display.html）
@PandaWood 抱歉，您评论这篇文章已经快 2 年了。但是，我正在回复您的评论，以免其他读者被本文作者的解释误导。后者推断label 元素不尊重width 属性，因为它是一个内联元素。我想指出input 元素默认也是一个内联元素。但它允许使用 width 属性更改其宽度，这与label 元素不同。所以作者的推理是不正确的。

【解决方案3】：

我相信标签是内联的，因此它们不需要宽度。也许尝试使用“显示：块”并从那里开始。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

给出样式

display:inline-block;

希望这会有所帮助'

【讨论】：

【解决方案6】：

label 的默认display 模式是inline，这意味着它会自动调整大小以适应其内容。要设置宽度，您需要设置display:block，然后进行一些处理以使其正确定位（可能涉及float）

【讨论】：

【解决方案7】：

   label
    {
    display: inline-block;
    }

将使您能够灵活地更改标签的宽度并自定义对齐表单。干杯

【讨论】：