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;并将html部分包装在你可以通过css定位的选择器中。

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

将质量按钮，文本和Div对齐

1 个答案: