Как бы я изменить порядок на встроенный блок в CSS?

0

В настоящее время у меня есть ряд кнопок, которые находятся рядом друг с другом в встроенном блоке под классом "действия участника". Я бы хотел изменить порядок этих кнопок. Также я хотел бы добавить небольшой значок слева от них. Любые идеи о том, как это сделать? Здесь код:

 .member_actions {
    padding: 0px 0px 0px 96px;

}

.member_actions .send_gift a{
    display: inline-block;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #6c829b;
    line-height: 21px;
    height: 22px;
    padding: 0px 8px 0px 8px;
    margin: 0px 2px 0px 0px;
    background: image(btn_bg_red_big.png) repeat-x top left #c62800;
    color: #fff;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
.member_actions .block_profile a{
    position: absolute;
    float: left;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #6c829b;
    line-height: 21px;
    height: 22px;
    padding: 0px 8px 0px 8px;
    margin: 0px 2px 0px 0px;
    background: image(btn_small_red.jpg) repeat-x top left #8ea3be;
    color: #fff;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

 .member_actions .send_message a{
    display: inline-block;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #6c829b;
    line-height: 21px;
    height: 22px;
    padding: 0px 8px 0px 8px;
    margin: 0px 2px 0px 0px;
    background: image(btn_bg_red_big.png) repeat-x top left #c62800;
    color: #fff;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;

}

.member_actions .send_friend_request a, .member_actions .send_profile a, .member_actions .bookmark a {

    display: inline-block;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #6c829b;
    line-height: 21px;
    height: 22px;
    padding: 0px 8px 0px 8px;
    margin: 0px 2px 0px 0px;
    background: image(btn_small_red.jpg) repeat-x top left #8ea3be;
    color: #fff;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;

}

Также снимок экрана, чтобы вы могли его визуализировать. Спасибо! Изображение 174551

  • 0
    Пожалуйста, разместите HTML, а также. Переупорядочение должно быть выполнено в html. Есть несколько способов добавить значок (например, с помощью тега <img> или создания div и установки его в качестве фонового изображения с помощью css).
  • 0
    Кроме того, кажется, у вас есть ошибка, когда .block перемещается и абсолютно позиционируется. Он должен быть просто встроенным в дисплей, как и другие. Я рекомендую вам поместить как можно больше в общий класс ".nav_button", а затем создать более конкретные классы ".nav_button.red" для элементов, которые различаются. Это обеспечит менее противоречивую логику.
Теги:

1 ответ

2
Лучший ответ

Если вы хотите переупорядочить кнопки .member_actions вы можете добавить position: absolute к классу, а затем использовать .member_actions:nth-child(1), .member_actions:nth-child(2) и т.д. И добавить left: -50px для позиционирования элемента 50 пикселей влево или left: 50px 50 пикселей к элементу позиции 50 пикселей вправо. См. Пример jsfiddle

Чтобы добавить небольшой значок, снова используйте .member_actions:nth-child(n), где n равно 1, 2, 3 и т.д. Для таргетинга на определенный элемент, добавьте background: url("path_to_img.png") 0 0 no-repeat; → 0 пикселей слева, 0 сверху и добавить padding-left: 40px предполагая, что 40 пикселей - это ширина вашего изображения, если не изменить значение соответственно. Это приведет к удалению фонового изображения слева от текста и добавлению отступов к тексту, чтобы он не перекрывал изображение.

Поделиться
  • 0
    Это только хорошее решение, если вы не можете редактировать HTML. Ручная установка положения путем измерения пикселей считается ненужной и очень плохой формой в противном случае.
  • 0
    Полностью согласен, но это был не вопрос.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню