Во втором окне обратите внимание, как стрелка находится в одном месте. Как я могу заставить поток работать с div?
Использование scroll right center в свойстве background работает, но я хочу сохранить правильное дополнение.
Я также стараюсь избегать использования двух div или тега. Возможно ли это только через. box div?
Как насчет добавления изображения вместо :after?
.box {
background: #a6cf83;
float:left;
color:#333;
font-weight:bold;
padding:8px;
}
.box:after {
content: url(http://cdn1.iconfinder.com/data/icons/humano2/24x24/actions/new-go-next.png);
}
.right-align-background {
background-position: center right;
}
Вы также можете использовать background-origin: content-box;, если вы хотите, чтобы ваш фон совпал с заполнением, которое вы установили в элементе.
Что-то вроде этого:
input.error {
background: no-repeat;
background-image: url('../images/field-error.png');
background-position: right center;
background-origin: content-box;
padding-right: 5px;
}
Если вам нужно заполнить справа, я думаю, вам, возможно, придется идти с процентами:
background-position:95% 50%;
будет очень хорошо, если ваши элементы имеют одинаковую ширину.
Calc() теперь поддерживает 95% браузеров в США (сентябрь 2017 г.) и предлагает элегантное решение этой проблемы.
background-position: calc(100% - 24px) center;