Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<style type="text/css">
#action-icons
{
    float:right;
}
#action-icons.img
{
    position:relative;
    top:-30px;
    padding-right:200px;
}
</style>
</head> 

<body> 
    <h1 class="edit">Some nifty title
    <span id="action-icons"> 
    <img src="foo.png" width="64" height="64" alt="" id="newsticky"/> 
    <img src="bar.png" width="60" height="60" alt="" id="trash"/> 
    </span> 
    </h1> 
</body> 
</html>

Answer 1

尝试添加：

#action-icons.img
{
    position:relative;
    top:-30px;
    padding-right:200px;
}

可能会这样做。

修改：您#action-icons.img删除了点，因此它是#action-icons img。

点将img设置为一个类，所以如果你拥有它，HTML将如下所示：

<img src="bar.png" width="60" height="60" alt="" id="trash" class="img"/>

希望它有所帮助。

修改 - 以下是完整的工作代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<style type="text/css">
#action-icons
{
    float:right;
}
#action-icons img
{
    position:relative;
    top:-30px;
    margin-left:50px;
}
</style>
</head> 

<body> 
    <h1 class="edit">Some nifty title
    <span id="action-icons"> 
    <img src="foo.png" width="64" height="64" alt="" id="newsticky"/> 
    <img src="bar.png" width="60" height="60" alt="" id="trash"/> 
    </span> 
    </h1> 
</body> 
</html>

Answer 2

尝试margin-right

并使用

#action-icons img

解决图像问题。

#action-icons.img

表示“ID为action-icons且类 img的任何元素。

Answer 3

更改

#action-icons.img

要

#action-icons img

并检查

它在firefox上适用于我

图像之间的填充不会填充

3 个答案: