将内联块向右对齐而不使用浮动

Question

我正在使用内容管理系统，并且已经通过选择文本和应用类来设置客户端，并使用类来创建自己的按钮。现在客户希望所有的按钮都对齐，这对于“float：right”来说很容易。但它似乎与按钮下方的任何内容重叠，所以我想知道是否有人知道修复或更好的方法来解决这个问题，牢记它在一个只适用于p或span的类中的CMS。

.LinkButtons { 
display: inline-block; 
*display: inline; 
padding:5px 10px 5px 10px; 
background-color:#00649c; 
color:#fff; 
text-decoration:none; 
font-weight:bold; 
font-size:12px; 
float:right; 
} 

.LinkButtons:hover, .linkbuttons:hover {background-color:#00718b; cursor:pointer; text-decoration:none;} 
.LinkButtons a, .linkbuttons a {color:#fff; text-decoration:none;} 
.LinkButtons a:hover, .linkbuttons a:hover {color:#fff; text-decoration:none;} 

<p>Text above</p> 
<p class="LinkButtons">MORE INFO</p> 
<p>Text below gets the button overlapping due to the float floating over top</p> 

Answer 1

好吧，我已经得到了你的意思。 try this jsfiddle。您希望内联块元素清除其左侧的所有空间。这可以通过添加下面的规则到你的CSS

.LinkButtons + p { 
    clear: right; 
} 

此设置所有<p>元素，这是说，按钮下一个兄弟，以不允许在他们的右什么来实现。当然，您可以修改此规则以适应您期望在按钮后出现的其他元素。或者你也可以做

.LinkButtons + * { 
    clear: right; 
} 

所有:)

更新

使用这种技术不会允许，如果你想要把同一行的多个按键下面就相同，使用多个按钮。

/* Replace */ 
.LinkButtons + * { 
    clear: right; 
} 

/* With */ 

.LinkButtons+:not(.LinkButtons){ 
    clear: right; 
} 

规则只会清除没有按钮的元素本身的权限。

jsfiddle

Answer 2

在此的jsfiddle看看这里：

http://jsfiddle.net/a8qqU/

我做了一个包装的div有内嵌按钮作为一个孩子。然后，我使用text-align属性并将其设置为“右”以将按钮对齐到右侧。

CSS：

.LinkButtons { 
    display: inline-block; 
    *display: inline; 
    padding:5px 10px 5px 10px; 
    background-color:#00649c; 
    color:#fff; 
    text-decoration:none; 
    font-weight:bold; 
    font-size:12px; 
} 

.align-right { 
    text-align:right; 
} 

.LinkButtons:hover, .linkbuttons:hover { 
    background-color:#00718b; 
    cursor:pointer; 
    text-decoration:none; 
} 

.LinkButtons a, .linkbuttons a { 
    color:#fff; 
    text-decoration:none; 
} 

.LinkButtons a:hover, .linkbuttons a:hover { 
    color:#fff; 
    text-decoration:none; 
} 

HTML：

<p>Text above</p> 
<div class="align-right"><p class="LinkButtons">MORE INFO</p></div> 
<p>Text below gets the button over top</p>