css label width not taking effect
HtmlCssLabelHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
Do display: inline-block
:
#report-upload-form label {
padding-left:26px;
width:125px;
text-transform: uppercase;
display:inline-block
}
Solution 2 - Html
Use display: inline-block;
Explanation:
The label
is an inline element, meaning it is only as big as it needs to be.
Set the display
property to either inline-block
or block
in order for the width
property to take effect.
Example:
#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>
Solution 3 - Html
I believe labels are inline, and so they don't take a width. Maybe try using "display: block" and going from there.
Solution 4 - Html
Make it a block first, then float left to stop pushing the next block in to a new line.
#report-upload-form label {
padding-left:26px;
width:125px;
text-transform: uppercase;
display:block;
float:left
}
Solution 5 - Html
give the style
display:inline-block;
hope this will help'
Solution 6 - Html
label
's default display
mode is inline
, which means it automatically sizes itself to it's content. To set a width you'll need to set display:block
and then do some faffing to get it positioned correctly (probably involving float
)
Solution 7 - Html
label
{
display: inline-block;
}
will give you the flexibility to change the width of the labels and custom align the form. cheers