將按鈕，文本和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