html - 如何在CSS的内联块中重新排列顺序？

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

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

}

还有一个屏幕截图，以便您可以可视化它。谢谢！

最佳答案

如果要重新排列.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是图像的宽度，如果没有相应地更改该值。这会将背景图像从文本中删除，并在文本中添加填充，因此它不会与图像重叠。

关于html - 如何在CSS的内联块中重新排列顺序？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20255800/