Question

问题我在锚点上的背景图片是之前元素需要在调整屏幕大小时随文本移动。

在调整屏幕大小时，我需要背景图像来保持其位置（例如左侧：20px;）和文本。

这是我的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;
}

响应/相对定位背景图像

1 个答案: