6

こんにちは、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>
4

3 に答える 3

20

ただ行う：

.rollovericons a{
    margin: 10px;
}

これにより、クラス<a>内のすべてのアイテムにマージンが追加されます。rollovericons

于 2013-07-14T21:49:16.430 に答える
2

ボタンの間にスペースを追加する space というクラスを追加しました。

あなたが見るためのjsfiddleはこちらです：http://jsfiddle.net/mFfAX/ 

.space {margin-bottom:15px}
于 2013-07-15T00:09:32.357 に答える
0

これを試して：

.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>
于 2013-07-14T21:51:32.973 に答える