對齊文本的div右

Question

這撥弄中心對齊內容頁：

http://jsfiddle.net/jbk7e0we/5/

怎麼可以這樣的內容保持一致，使「輸入文本」正好出現與「大條目文本」對齊。我試過使用align=right但不起作用。

小提琴代碼：

<div class="center"> 
<div style="display:inline-block; width:200px; align=right">Enter text</div> 
<div style="display:inline-block; width:200px;"><input type = "text" size = "15"/></div> 

    <div style="block"></div> 
<div style="display:inline-block; width:200px; align=right">Big entry for text</div> 
<div style="display:inline-block; width:200px;"><input type = "text" size = "15"/></div> 
</div> 

.center { 
    margin-left: auto; 
    margin-right: auto; 
    width: 800px; 
} 

Answer 1

您需要更改

align=right 

到

text-align: right; 

例子：

.center { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 800px; 
 
}

<div class="center"> 
 
    <div style="display:inline-block; width:200px; text-align: right;">Enter text</div> 
 
    <div style="display:inline-block; width:200px;"> 
 
    <input type="text" size="15" /> 
 
    </div> 
 

 
    <div style="block"></div> 
 
    <div style="display:inline-block; width:200px; text-align: right;">Big entry for text</div> 
 
    <div style="display:inline-block; width:200px;"> 
 
    <input type="text" size="15" /> 
 
    </div> 
 
</div>

JSFiddle

Answer 2

使用text-align: right;不align: right

Answer 3

變化：

align=right 

到：

text-align:right 

jsFiddle example

Answer 4

您的內嵌樣式改爲text-align:right;您的代碼看起來

<div class="center"> 
<div style="display:inline-block; width:200px; text-align:right;">Enter text</div> 
<div style="display:inline-block; width:200px;"><input type = "text" size = "15"/></div> 

    <div style="block"></div> 
<div style="display:inline-block; width:200px; text-align:right;">Big entry for text</div> 
<div style="display:inline-block; width:200px;"><input type = "text" size = "15"/></div> 
</div> 

.center { 
    margin-left: auto; 
    margin-right: auto; 
    width: 800px; 
}