CSS标签宽度不起作用

本文介绍了CSS标签宽度不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个通用表单，我想用它来对齐标签和输入字段。
由于某些原因，当我给标签选择器添加一个宽度时，没有任何反应：

HTML：

     > 
 
 
 ＃report-upload-form label {
 padding-left：26px; 
 width：125px; 
 text-transform：大写; 
 display：inline-block 
}

I have a generic form, which I'd like to style to align the labels and the input fields.For some reason when I give a width to the label selector, nothing happens:

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

Output:

What am I doing wrong?

解决方案

Do display: inline-block:

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

http://jsfiddle.net/aqMN4/

这篇关于CSS标签宽度不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！