在按钮之间添加空间？答案

【问题标题】：Adding space between buttons?在按钮之间添加空间？
【发布时间】：2013-07-12 17:14:17
【问题描述】：

您好，我这里有一个代码，除了一件事之外，它都是完美的。代码中每个按钮之间没有空格。我试过保证金，但不幸的是它是一个无序列表，所以我有点困惑。我会添加或替换什么以在两个按钮之间留出空间。帮助？？ :(

<!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>

【问题讨论】：

您的 HTML 不包含无序列表。我认为您没有尝试设置边距或填充。
只需将margin-right 规则添加到第一个按钮样式，或将margin-left 添加到第二个按钮样式。
嗨乔治，尝试使用“ ”按钮之间。

标签： html css navigation rollover

【解决方案1】：

只要做：

.rollovericons a{
    margin: 10px;
}

这将为rollovericons 类中的每个<a> 项目添加一个边距。

【讨论】：

【解决方案2】：

我添加了一个名为 space 的类，它将在按钮之间添加一个空格。

这里有 jsfiddle 供您查看：http://jsfiddle.net/mFfAX/

.space {margin-bottom:15px}

【讨论】：

【解决方案3】：

试试这个：

.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>

【讨论】：