Question

我有这个代码，最后想出了如何让按钮并排放置，但现在我无法弄清楚如何在它们之间留出空间。它们在按钮和页面顶部之间也有很大的余量。任何帮助，将不胜感激！

<html>
<head>


<style type="text/css">
    .classname {
 -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4fa3f7), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #4fa3f7 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4fa3f7', endColorstr='#378de5');
background-color:#4fa3f7;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
border:1px solid #84bbf3;
    display:inline;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:65px;
line-height:65px;
width:131px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
    float: left;

}


.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5),             color-       stop(1, #4fa3f7) );
background:-moz-linear-gradient( center top, #378de5 5%, #4fa3f7 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',                    endColorstr='#4fa3f7');
    background-color:#378de5;
}.classname:active {
position:relative;
top:1px;



div.button{
display: inline-block;
list-style-type: none;
margin: 7px;
}



</style>
</head>
<body>
<p><center><h3>Where would you like to stay?</h3></center></p>

<div class="button"> 
<a href="http://www.padreislandbeach.com/where-to-stay-north-padre/" class="classname"><font        color=white>North Padre</font></a> 

<a href="http://www.padreislandbeach.com/where-to-stay-port-aransas/" class="classname"><font      color=white>Port Aransas</font></a>

<a href="http://www.padreislandbeach.com/where-to-stay-south-padre/" class="classname"><font color=white>South Padre</font></a>
</div>




</body>
</html>

Answer 1

您的实际按钮为.classname，而不是.button。因此，您需要将边距应用于锚点。

a.classname {
    margin-right:10px;
}

我还注意到了一些你不应该使用的弃用标签（至少与现代css3功能并不完全相同）。 <font>已被弃用。

Answer 2

您的代码有很多问题。以下是一些让您的生活更轻松的提示（我所做的所有更改都可以在https://www.diffchecker.com/mydyojpc看到）：

.classname应该是一个描述性的类名。我将其更改为.button。
float:left弄乱了你的代码。我删除了它，因此您可以将按钮居中，并添加许多其他CSS属性。
悬停渐变不起作用的原因是因为color-stop之间有空格。它看起来像color- stop。
您有多个停止使用的CSS值（不再使用）。我用更新的属性替换了它们。
您有这么多border-radius-top-left等。属性，可以用border-radius简写缩短。基本上我删除了所有这些代码行，并用3行代替它完全相同的东西。

http://jsfiddle.net/67m3gq9s/1/

希望这有帮助！

Answer 3

您尝试使用margin吗？

.classname{
  margin-left:10px; 
}

将两个按钮并排放置

3 个答案:

http://jsfiddle.net/67m3gq9s/1/