对齐文本的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; 
}