How to put label in row of form with align by right?

Question

There is the following form:

  <form accept-charset="UTF-8" action="/admin/news" class="new_news" id="new_news" method="post">
    <div class='row'>
      <label for="news_content">Content</label>
      <input id="news_content" name="news[content]" type="text" />
    </div>
    <div class='row'>
      <label for="news_subject">Subject</label>
      <input id="news_subject" name="news[subject]" type="text" />
    </div>
    <div class='row'>
      <input name="commit" type="submit" value="Добавить" />
    </div>
  </form>

I need to align label in row with the fixed length and text is aligned by right:

label {
    float: left;
    text-align: right;
    margin-right: 15px;
    width: 100px;
    padding-top: 5px;
    font-size: 1.4em;
}

But it doesn't do what I need. What's the mistake? Thanks in advance.

Don't really get you. What's wrong with this? The text is aligned right. [DEMO](http://jsfiddle.net/Ruddy/STvvf/) — Ruddy, Feb 14 '14 at 11:46

Praveen · Answer 1 · 2014-02-14T11:59:02.803

1

If you want to have a design like

|___textbox_____| label

Then you should go with float property.

label {
    float: right;
    font-size: 1.4em;
}
input[type="textbox"] {
    float: left;
}
form {
    width:230px;  //we need to add this to have closed view
}

JSFiddle

edited Feb 14 '14 at 11:59

answered Feb 14 '14 at 11:53

Praveen

55,303
33
133
164

score 0 · Answer 2 · answered Feb 14 '14 at 11:47

0

You need to add css

div
{
    clear:both;
}

to your divs, look to fiddle. Hope this helps.

answered Feb 14 '14 at 11:47

vitaliy zadorozhnyy

1,226
10
12

Is that that they are asking for? I don't see how it is. They have given us limited CSS (label only) and that it is. They have `.row` already there so I'm pretty sure that does the whole layout for them. – Ruddy Feb 14 '14 at 11:49

score 0 · Answer 3 · edited May 23 '17 at 12:13

0

This can be solved with a "clearfix" or you could add display:inline-block to your div with class "row".

See this demo.

edited May 23 '17 at 12:13

Community

1
1

answered Feb 14 '14 at 11:49

nilsand

46
3

score 0 · Answer 4 · answered Feb 14 '14 at 11:52

0

You need to make your div clear from left float. You can get it by using clear:left on div's. Checkout the fiddle http://jsfiddle.net/tT8AX/

div
{
    clear:left;
}

answered Feb 14 '14 at 11:52

Ankur Aggarwal

2,993
5
30
56

score 0 · Answer 5 · answered Feb 14 '14 at 11:53

0

just do Float:right; in css

label {
float: right;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;

}

answered Feb 14 '14 at 11:53

anil shah

3,079
2
12
4

score 0 · Answer 6 · answered Feb 14 '14 at 11:54

I have aligned as enter image description here

Here is a jsFiddle Demo

CSS

label {
    float: left;
    text-align: right;
    margin-right: 15px;
    width: 100px;
    padding-top: 5px;
    font-size: 1.4em;
}

div {
    float:left;
    width:100%;

}
.btnrow { 
    float:right;
    width:250px;

}

HTML

<form accept-charset="UTF-8" action="/admin/news" class="new_news" id="new_news" method="post">
    <div class='row'>
      <label for="news_content">Content</label>
      <input id="news_content" name="news[content]" type="text" />
    </div>
    <div class='row'>
      <label for="news_subject">Subject</label>
      <input id="news_subject" name="news[subject]" type="text" />
    </div>
    <div class='btnrow'>
      <input name="commit" type="submit" value="Добавить" />
    </div>
  </form>

score 0 · Answer 7 · answered Feb 14 '14 at 12:02

I am not sure what your "row" class contains. In case it does not have anything the you can check the styles which I have mentioned and that will fix your issue.

Check this out here

CSS to fix the code

.row{
  width: 100%;
  float: left;
}
.button{
  margin-left: 115px;
}

label {
    float: left;
    text-align: right;
    margin-right: 15px;
    width: 100px;
    padding-top: 5px;
    font-size: 1.4em;
}

score 0 · Answer 8 · answered Feb 14 '14 at 12:12

Try the below code, I have added extra div,

<div class="wrapper">
  <form accept-charset="UTF-8" action="/admin/news" class="new_news" id="new_news" method="post">
    <div class='row'>
      <span class="lable_class"><label for="news_content">Content</label></span>
      <span class="input_class"><input id="news_content" name="news[content]" type="text" /></span>
    </div>
    <div class='row'>
      <span class="lable_class"><label for="news_subject">Age</label></span>
      <span class="input_class"><input id="news_subject" name="news[subject]" type="text" /></span>
    </div>

    <div class='row'>
      <input name="commit" type="submit" value="Click" />
    </div>
  </form>
 <div>

and few css modifications and additions,

.lable_class {
    width: 200px;
    font-size: 1.4em;
}
.input_class{
    width: 300px;
}
.row{
    margin-right: 175px;
    text-align: right;
}
.wrapper{
    padding-top:100px;
    background-color:gray;
    width:500px;
    height:200px;
}

score 0 · Answer 9 · answered Oct 10 '14 at 08:13

0

just use float if you want to align it whether left or right.

label {
float: right;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}

answered Oct 10 '14 at 08:13

AaronTeheni19

106
12

How to put label in row of form with align by right?

9 Answers9