如何將標籤按右對齊的形式排成一行？

有以下形式：如何將標籤按右對齊的形式排成一行？

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

我需要對齊的標籤行與固定長度和文字是由右對齊：

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

但它不會做什麼，我需要。什麼是錯誤？提前致謝。

來源

2014-02-14 malcoauri

真的不明白你。這有什麼問題？文本正確對齊。 [DEMO]（http://jsfiddle.net/Ruddy/STvvf/） – Ruddy

您需要

div 
{ 
    clear:both; 
}

添加CSS到您的div，看看fiddle。希望這可以幫助。

來源

2014-02-14 11:47:27

這是他們要求的嗎？我不明白這是怎麼回事。他們給了我們有限的CSS（僅標籤），它是。他們已經有'.row'，所以我很確定他們的整個佈局。 – Ruddy

這可以用「clearfix」來解決，或者你可以添加display:inline-block到您的分度類「行」。

看到這個demo。

來源

2014-02-14 11:49:24 nilsand

你需要讓你的div從左邊的浮動清除。你可以通過使用清除：div 0123離開。結帳小提琴http://jsfiddle.net/tT8AX/

div 
{ 
    clear:left; 
}

來源

2014-02-14 11:52:09

只是做浮動：正確;在CSS

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

}

來源

2014-02-14 11:53:10

如果你想有一個像

|___textbox_____| label

設計那麼你應該float財產去。

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

來源

2014-02-14 11:53:17 Praveen

我已經對齊， enter image description here

這裏是一個的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>

來源

2014-02-14 11:54:52 Sam1604

我不確定你的「行」類包含。如果它沒有任何東西，你可以檢查我提到的樣式，這將解決您的問題。

Check this out here

CSS來修復代碼

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

來源

2014-02-14 12:02:54 shinesecret

嘗試下面的代碼，我已經添加額外的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>

和幾個CSS修改和補充，

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

來源

2014-02-14 12:12:46 Sanoop

只是使用浮動，如果你想對齊，無論是向左或向右。

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

來源

2014-10-10 08:13:38 AaronTeheni19

如何將標籤按右對齊的形式排成一行？

回答

相關問題