Html 在按钮之间添加空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17644088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding space between buttons?
提问by raininggalaxies
Hi I have a code here that is all perfect except one thing. There is NO space between each button in the code. I've tried margin, but unfortunately its an unordered list so I am a bit confused. What would I add or replace to have space between the two buttons. Help?? :(
嗨，我这里有一个代码，除了一件事之外都是完美的。代码中的每个按钮之间没有空格。我试过保证金，但不幸的是它是一个无序列表，所以我有点困惑。我将添加或替换什么以在两个按钮之间留出空间。帮助？？:(
<!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>
回答by Francisco Presencia
Just do:
做就是了：
.rollovericons a{
margin: 10px;
}
That will add a margin to every <a>item inside the rollovericonsclass.
这将为类中的每个<a>项目添加一个边距rollovericons。
回答by raininggalaxies
I added a class called space which will add a space in betwween the buttons.
我添加了一个名为 space 的类，它将在按钮之间添加一个空格。
heres the jsfiddle for you to see: http://jsfiddle.net/mFfAX/
继承人jsfiddle给你看：http: //jsfiddle.net/mFfAX/
.space {margin-bottom:15px}
回答by Luis Y
Try this:
尝试这个：
.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>
