css - 响应式/相对定位背景图片

Question

我遇到的问题是 anchor 上的背景图像，因为 before 元素需要在您调整屏幕大小时随文本一起移动。

当您调整屏幕大小时，我需要背景图像来保持其与文本的位置(例如左:20 像素；)。

这是我的 CSS:

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul li {
    float: left;
    width: 50%;

}

ul li a {
    display: block;
    padding: 15px 20px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    position: relative;
    color: #717171;
}

ul li a:before {
    background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
    content: '';
    display: block;
    width: 34px;
    height: 33px;
    position: absolute;
    top: 10px;
}

.link-1:before {
    left: 20px;
}

.link-2:before {
    left: 0px;
}

这是一个工作示例:http://jsfiddle.net/2KHS6/

欢迎所有建议

Answer 1

新版本:

http://jsfiddle.net/2KHS6/5/

希望它能满足您的需求。不过，您可能希望设置一个 min-width 以避免小屏幕出现问题。我基本上是这样做的:

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul li {
    display: inline-block;
    width: 50%;
    margin: 10px 0;
    /* So things don't get crazy */
    min-width: 160px;
    /* center the child, the <a> */
    text-align: center;
}

ul li a {
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    color: #717171;
    /* Should be the same height as the img so it stays centered */
    line-height: 33px;
}

ul li a:before {
    background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px;
    content: '';
    display: block;
    width: 34px;
    height: 33px;
    position: absolute;
    /* position the image at the left of the a. There are many methods to do this actually */
    margin: 0 0 0 -50px;
}