Почему не выравниваются элементы на панели по горизонтали? Кнопка постоянно съезжает.
код в хтмл
<p>Добро пожаловать</p>
<blockquote>
<blockquote>
<p>
</p>
</blockquote>
</blockquote>
css
p#action-bar {
background: url('../img/action-bar-bg.png') no-repeat;
height: 14px;
margin-left:200px;
margin-right:10px;
padding: 10px 60px 55px 20px;
width: 154px;
font-size:12px;
}
p#action-bar a:before {
content: '| ';
}
p#action-bar a[title="vk"]:after {
content: ' |';
Съезжает, потому что в блок по ширине не помещается.
Чтобы гарантировано в одну строку было:
p#action-bar { white-space: nowrap; }
Теперь осталось padding поправить. Зачем там справа 60px, когда явно достаточно 20 по дизайну?
p#action-bar { padding: 10px 20px 55px 20px; }
Теперь такая штука - если на компьютере отсутствует некий шрифт, то будет использована замена, и не факт, что тот текст, который у вас влезает по ширине в 154 пикселя, влезет в этот блок у других.
В Linux даже при наличии шрифта строка на несколько процентов длиннее.
А вдруг захочется текст ссылки изменить, или еще одну добавить? - Картинку переделывать?
Поэтому избавляемся и от ширины, и от картинки:
p#action-bar {
background: #9A9A9A;
border-radius: 4px;
height: 14px;
margin-left: 200px;
margin-right:10px;
padding: 10px 20px 10px 20px; /* тут м. б. придется поправить слегка - по вертикали */
font-size:12px;
line-height:14px;
white-space: nowrap;
}
p#action-bar a:before {
content: '| ';
}
p#action-bar a[title="vk"]:after {
content: ' |';
Возможно, лучше было бы еще этот блок позиционировать, или float: right; для него использовать. Но это зависит от того, как выравниваются остальные элементы в этой горизонтали.
Горизонтальное выравнивание через margin: 0 auto; делается к родителю. По приведенному кода сложно сказать что у вас там. Была бы ссылка возможно подсказал бы и решение.
Если что пиши на почту помогу
