Question

我正在尝试为这些行创建一个CSS，但它们并没有按照我想要的方式工作。会有类似的几行（约60个）。

首先：所有行都将使用img src =“staticimage.png”。是否可以在CSS中将此图像设置为默认值（它将处理一个链接，在之前的“a”标记中设置）？

第二：如何从此图像中删除尺寸代码（width =“50”align =“right”）并将其放入CSS？

这是我的代码：

HTML代码：

<div id="whiteborder"><img src="image1.png">Text 1<a href="linkone.html"><img src="staticimage.png" width="50" align="right"></a></div>
<div id="whiteborder"><img src="image2.png">Text 2<a href="linktwo.html"><img src="staticimage.png" width="50" align="right"></a></div>
<div id="whiteborder"><img src="image3.png">Text 3<a href="linkthree.html"><img src="staticimage.png" align="right"></a></div>

CSS代码：

#whiteborder
{
    background: white;
    margin: 2px 10px 0px 10px;
    box-sizing: border-box;
    padding: 20px;
    text-align: left;
    font-weight: bold;
    font-size:10px; 
}

PS：所有带数字的文本都会有所不同。我不希望任何Javascript设置这些行。

提前致谢！

Answer 1

我并不完全清楚你要在这里建立什么，而是要解决你的个人问题：

您不能以任何其他方式将“staticimage.png”设置为默认值，而是使用CSS将其设置为背景图像
要从图片HTML中删除“尺寸标注代码”，您可以在CSS中设置 width：50px; ，并使用 float：right; <将其对齐到右侧/ LI>

Answer 2

您应该可以像这样排序图像对齐：

#whiteborder a img 
{
   width: 50px;
   float: right;
}

但是，如果您将a代码更改为display: block; float: right并在其上设置background-image，则可以免除img并为所有这些设置样式a标记在一个地方。

Working Demo

Answer 3

HTML：

<div id="whiteborder">
    <img src="image1.png">Text 1 <a href="linkone.html"></a>
    <img src="image2.png">Text 2 <a href="linktwo.html"></a>
    <img src="image3.png">Text 3 <a href="linkthree.html"></a>
</div>

CSS：

#whiteborder a{
    background: repeat-x url("staticimage.png");
    width: 50px;
    height: 10px;
    ...
}

P.S。你不应该多次使用相同的id，但如果你需要，你可以使用class

CSS - 图像/链接的问题

3 个答案: