Выровнять встроенный блок вправо без использования float

Question

Я использую систему управления контентом, и я настроил клиент с классом, чтобы создать собственные кнопки, выбрав текст и применяя класс. Теперь клиент хочет, чтобы все кнопки были правильно выровнены, что легко с помощью «float: right»; но он кажется совпадающим с любым содержимым под кнопкой, поэтому мне было интересно, знает ли кто-нибудь об исправлении или улучшенном подходе к этой проблеме, имея в виду его внутри CMS, который просто применяет класс к p или span.

.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

Ok я получил то, что вы имеете в виду. try this jsfiddle. Вы хотите, чтобы элемент встроенного блока очищал все пространство слева. Это может быть достигнуто путем добавления следующего правила к вашему CSS

.LinkButtons + p { 
    clear: right; 
} 

Это устанавливает все <p> элементов, которые находятся рядом родственные указанная кнопка, чтобы ничего о своем праве не позволяет. Конечно, вы можете изменить это правило, чтобы разместить другие элементы, которые вы ожидаете появиться после кнопки. Или вы можете сделать

.LinkButtons + * { 
    clear: right; 
} 

для всех :)

Update

Используя этот метод не позволит несколько кнопок на той же, использование следующих, если вы хотите положить несколько кнопок на одной линии.

/* 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>