在页面两侧的同一行显示按钮

时间:2013-04-08 23:58:35

标签: html css css-float

我有左右按钮,我想在页面上的某些内容的顶部和底部显示导航按钮,如下所示:

<div style="float: right;">     
    <button class="right">Right button</button>
</div>
<div>       
    <button class="left">Left button</button>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis faucibus
feugiat. Suspendisse felis tortor, sodales quis scelerisque a, malesuada lobortis erat.
Etiam vel lectus vitae nulla imperdiet dapibus. Curabitur accumsan pretium viverra. 
Vivamus sit amet gravida ante. Aenean elit lorem, aliquet porta sollicitudin non, 
elementum aliquam massa. Ut magna arcu, malesuada lacinia rutrum ornare, accumsan sed 
eros.</p>

<div style="float: right;">     
    <button class="right">Right button</button>
</div>
<div>       
    <button class="left">Left button</button>
</div>

我遇到的问题(如here所示)是如果我只有我的右按钮而不是我的左按钮,使用浮动浮动按钮到我的段落的右边(这是正常的,因为这是什么来的在按钮之后),但如果我使用text-align:right而不是向右浮动,一切正常。有没有更好的方法我可以做到这一点,而无需检查条件,看看我的左按钮是否存在,并将我的浮动更改为文本对齐?

谢谢

2 个答案:

答案 0 :(得分:1)

不要使用float:对,

没关系
<div style="text-align: right;clear:left;">     

答案 1 :(得分:0)

如果你把

p {
    float: none;
    clear: both;
}

应该修复它:http://jsfiddle.net/P2rNC/2/