Cant apply CSS elements to make form right-aligned
Question
i have basic html form with css elements and i can't figure out why CSS code is not applied and does nothing. There is my code:
<!doctype html>
<html>
<head>
<title> A basic form </title>
<style type ="text/css">
.form-field{
clear: both;
padding: 10px;
width: 350px;
}
.form-field label{
float: left;
width: 450px;
text-align: right;
font-size: xx-small;
}
.form-field input{
float: right;
width: 150px;
text-align: ;
}
#submit{
font-size: larger;
text-align: center;
}
</style>
</head>
<body>
<h1> A basic form </h1>
<hr>
<form action="#">
<fieldset >
<legend>Form Information </legend>
<div>
<label for="username"> Name :</label>
<input type="text" id="username" name="username">
</div>
<div>
<label form="email"> E-mail address:</label>
<input type="text" id="username" name="email">
</div>
<div>
<input id="submit" type="submit" name="submit"
value="Send Form">
</div>
<div>
<input type="reset" name="reset" value="Clear Form">
</div>
</fieldset>
</form>
</body>
</html>
In fact, it does make changes for my submit button, but form itself is still have base (left) alignment. What did i miss?
Any help would be appreciated, thanks!
5 answers
solution1
4 2014-03-12 07:40:15
I have edited your html. Please take a look this fiddle
I have just added
<fieldset class="form-field">
solution2
3 2014-03-12 07:45:40
Your style is for class "form-field" but it is not mentioned anywhere in the html code.
Edit your form tag to -
<form action="#" class="form-field">
Then you will be able to see the change.
solution3
2 ACCPTED 2014-03-12 07:40:45
This will do it for you. Fiddle here
fieldset {text-align:right;}
solution4
2 2014-03-12 07:42:48
Make the form like this:
<form class="form" action="#">
Add this css:-
.form{
text-align: right;
}
solution5
2 2014-03-12 07:43:41
The CSS code is not applied because the HTML element with the class "form-field" that you try to style doesn't exists. You need to apply the class to a parent element in order to be able to style the label and input.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.