есть вот такая разметка и кнопочка (см. скрин)
CODE (
html):
скопировать код в буфер обмена
<div>
<span>Язык: <strong>Русский</strong></span>
<a href="" title="Изменить язык">Изменить</a>
</div>
<div>
<span>Стиль: <strong>Стандартный</strong></span>
<a href="" title="Изменить стиль">Изменить</a>
</div>
Стиль к кнопке
CODE (
htmlphp):
скопировать код в буфер обмена
display: inline-block;
border: 1px solid #007;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
padding: 0 5px 0 20px;
float: right;
color: #fff;
font-size: 10px;
background-color: #6266ff;
background-image: url(../img/bg_action.png), url(../img/bg_action_arrow.png);
background-position: 15px 0, 5px 0px;
background-repeat: no-repeat, no-repeat;
margin: 0 6px;
text-decoration: none;
text-shadow: 0 0 3px #fff;
-o-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-webkit-transition: background-color 0.4s ease;
-moz-user-select: none;
-webkit-user-select: none;
в Google Chrome и Apple Safari конпка в ряду с самым длинным текстом соскакивает вниз, во всех остальных браузерах все ОК (даже в осле
) вобщем смотрите скрин...
Вопрос собственно почему так происходит?
Нашел 2 пути, как исправить это:
- первый: изменить порядок элементов, т.е. переставить местами span и a, НО не очень хочется, прийдется редактировать js
- второй: указать в стилях min-width, но это не очень хорошое решение, т.к. не известно какая длинна текста будет, соответственно и длина блока...