html - 我将如何重新排列 CSS 中内联 block 的顺序？

Question

我目前有一行按钮，它们在“成员操作”类下的内联 block 中彼此相邻。我想重新排列这些按钮的顺序。我还想在这些左侧添加一个小图标。关于如何实现这一目标的任何想法？这是代码:

 .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;

}

还有一个屏幕截图，以便您可以直观地看到它。谢谢!

Answer 1

如果您想重新排列 .member_actions 按钮，您可以将 position: absolute 添加到类中，然后使用 .member_actions:nth-child(1) 、.member_actions:nth-child(2) 等等并添加 left: -50px 将元素定位到左侧 50 像素处，或者 left: 50px 将元素定位到右侧 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 假设40px是宽度你的形象，如果不相应地改变值(value)。这将删除文本留下的背景图像并向文本添加填充，因此它不会与图像重叠。