gpt4 book ai didi

css - 并排放置两个按钮

转载 作者:行者123 更新时间:2023-11-28 15:25:48 24 4
gpt4 key购买 nike

我有了这段代码,终于想出了如何让按钮并排放置,但现在我不知道如何在它们之间留出空间。它们在按钮和页面顶部之间也有很大的空白。任何帮助,将不胜感激!

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

最佳答案

您的代码有很多问题。这里有一些让您的生活更轻松的提示(我所做的所有更改都可以在 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/

希望这对您有所帮助!

关于css - 并排放置两个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26942219/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com