こんにちは私はここに1つのことを除いてすべて完璧なコードを持っています。コード内の各ボタンの間にスペースはありません。私はマージンを試しましたが、残念ながらそれは順序付けられていないリストなので、少し混乱しています。 2つのボタンの間にスペースを空けるには、何を追加または置き換えますか。助けて?? :(
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
.rollovericons a#terms{
display: block;
width:138px;
height:27px;
background: url(http://icpy.webs.com/button/Terms.png) no-repeat;
}
.rollovericons a:hover#terms{
background: url(http://icpy.webs.com/button/Terms0.png) no-repeat;
}
.rollovericons a#contact{
display: block;
width:138px;
height:27px;
background: url(http://icpy.webs.com/button/contact.png) no-repeat;
}
.rollovericons a:hover#contact{
background: url(http://icpy.webs.com/button/contact0.png) no-repeat;
}
</style>
<body>
<div class="rollovericons">
<a href="http://www.Twitter.com" id="terms"></a>
<a href="http://www.Twitter.com" id="contact"></a>
</div>
</body>
ただやる:
.rollovericons a{
margin: 10px;
}
これにより、rollovericons
クラス内のすべての<a>
アイテムにマージンが追加されます。
ボタンの間にスペースを追加するspaceというクラスを追加しました。
あなたが見るためのjsfiddleをここに示します: http://jsfiddle.net/mFfAX/
.space {margin-bottom:15px}
これを試して:
.rollovericons ul li {
display: inline;
list-style-type: none;
padding-right: 7px;
}
<div class="rollovericons">
<ul>
<li><a href="http://www.Twitter.com" id="terms"></a></li>
<li><a href="http://www.Twitter.com" id="contact"></a></li>
</ul>
</div>