将按钮，文本和Div对齐

Question

我想将大部分代码中的所有内容都对齐到右侧。所以它看起来更好，不会分散其他部分。所以它是一个正确的方面，仍然可以用代码的其余部分点击。就在gui它是正确的。这是我想要放在屏幕右侧的代码。对不起，如果我不知道这一点，并知道如何在堆栈溢出中做出正确的代码。

<p>================================</p> 
<button style="background-color:Purple; color:red; border:red; font-size:15px;" type="button" 
onclick="buyMom()">Buy 1 mom</button> 
<p>Moms:+1 animals per second</p> 
<div id="momCount">0</div> 
<div id="momPrice">50</div><br> 
<p>================================</p> 
<button style="background-color:red; color:purple; border:red; font-size:15px;" type="button" 
onclick="buyFarm()">Buy 1 farm</button> 
<p>Farms:+50 animals per second</p> 
<div id="farmCount">0</div> 
<div id="farmPrice">500</div><br> 
<p>================================</p> 
<button style="background-color:yellow; color:blue; border:red; font-size:15px;" type="button" 
onclick="buyFactory()">Buy 1 factory</button> 
<p>Factorys:+100 animals per second</p> 
<div id="factoryCount">0</div> 
<div id="factoryPrice">1000</div><br> 
<p>================================</p>  
<button style="background-color:orange; color:red; border:red; font-size:15px;" type="button" 
onclick="buyClone()">Buy 1 cloner</button> 
<p>Cloners:+200 animals per second</p> 
<div id="cloneCount">0</div> 
<div id="clonePrice">2000</div><br> 
<p>================================</p> 

Answer 1

只要给它一个CSS text-align:right;，敷在你可以通过CSS的目标选择HTML部分。

HTML

<div class="container"> 
<p>================================</p> 
<button style="background-color:Purple; color:red; border:red; font-size:15px;" type="button" 
onclick="buyMom()">Buy 1 mom</button> 
<p>Moms:+1 animals per second</p> 
<div id="momCount">0</div> 
<div id="momPrice">50</div><br> 
<p>================================</p> 
<button style="background-color:red; color:purple; border:red; font-size:15px;" type="button" 
onclick="buyFarm()">Buy 1 farm</button> 
<p>Farms:+50 animals per second</p> 
<div id="farmCount">0</div> 
<div id="farmPrice">500</div><br> 
<p>================================</p> 
<button style="background-color:yellow; color:blue; border:red; font-size:15px;" type="button" 
onclick="buyFactory()">Buy 1 factory</button> 
<p>Factorys:+100 animals per second</p> 
<div id="factoryCount">0</div> 
<div id="factoryPrice">1000</div><br> 
<p>================================</p>  
<button style="background-color:orange; color:red; border:red; font-size:15px;" type="button" 
onclick="buyClone()">Buy 1 cloner</button> 
<p>Cloners:+200 animals per second</p> 
<div id="cloneCount">0</div> 
<div id="clonePrice">2000</div><br> 
<p>================================</p> 
</div> 

CSS

.container { 
    text-align: right; 
} 

example FIDDLE