logo标签列表

CSS标签宽度不起作用

htmlcsslabel
133

我有一个普通的表单，我想要将标签和输入框排列整齐。但是当我给标签选择器一个宽度时，却没有任何效果：

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

我做错了什么？

1
顺便问一下，将表单部分用<p>标签包装起来真的是一个好主意吗？ - JGallardo
7个回答
246

使用 display: inline-block：

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

http://jsfiddle.net/aqMN4/

1
坚持使用inline-block。已在IE7、IE8、IE9和FF中进行了测试。 - Davis
1
有没有绕过将每个元素放在<p>中的方法？ - Colin D
1
@ColinD 我建议使用 div 标签，而不是 <p> 标签。 - Davis
45

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

1
谢谢！inline-block正是我所需要的。使用block会让它看起来很奇怪。 - TheOne
2
请注意，在IE8以下版本中，对于inline-block的支持并不完善 - 现在可能不是太大的问题，但需要记在心里。（来源：http://www.quirksmode.org/css/display.html） - n00dle
1
@PandaWood 抱歉你在这篇文章上评论已经快两年了。但是，我回复你的评论是为了其他读者不会被这篇文章作者的解释误导。后者认为 label 元素不遵守 width 属性是因为它是一个内联元素。我想指出的是，input 元素默认也是内联元素。但是，与 label 元素不同，它允许使用 width 属性改变其宽度。因此，作者的推理是不正确的。 - ghd
6

我认为标签是内联的，因此它们不占据宽度。也许尝试使用“display:block”，然后从那里开始。

6

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

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

给出样式

display:inline-block;

希望这能有所帮助。

4
1
   label
    {
    display: inline-block;
    }

这将使您有更大的灵活性去更改标签的宽度并自定义表单的对齐方式。干杯！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接