html - 使用 CSS 响应式流体设计在按钮中放置图像

Question

我在响应式流体页面的特定部分遇到了一些问题，我正在尝试为平板电脑尺寸构建现在将 960 像素转换为 96% 容器的大小。

要查看问题所在，可在此处找到:http://shopper.izigo.pt/vote/

按钮中的箭头图形图像不像其他所有元素那样流畅，如果我尝试更改为纵向方向，箭头会变小。我已经根据目标 % 上下文进行了计算，但在这种特殊情况下它不起作用(这里是代码):

CSS:

main form button img {
    float: right;
    width: 12.3943661971831%;           /* 44px current element size % 355px parent (button) size */
    margin-right: 2.8169014084507%;     /* 10px current element size % 355px parent (button) size  */
    margin-top: 3.09859154929577%;      /* 11px current element size % 355px parent (button) size  */
}

而且页脚没有居中(这里是代码):

CSS:

footer {
    position: absolute;
    bottom: 30px;
    width: 96%;     /* equal to the containers width because it's in a absolute position */
}

Answer 1

我认为您按钮中的 img 实际上是样式，而不是内容。因此它属于您的 css 作为背景图片，而不属于您的 html 作为 img。这也使得定位更容易:

main form button {
    background: url(path/to/image.png) no-repeat right center;
    padding-right: 20px; /* width of image to prevent the label from laying on top of it */
}

(我可以建议您向该按钮添加一个类并以这种方式定位它，而不是您现在使用的那些冗长、难以维护且速度较慢的选择器)

对于页脚，无需定义宽度，您只需将 right 和 left 属性设置为 0(当它绝对定位时)。这样它将接管父级的宽度。像这样:

footer {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
}

两者都应该在您的流体设计中正常工作...