Question

在CSS中定位多个按钮的最佳（最优雅，最有效和通用）方法是什么？我想将按钮放在页面右上角的一行中。

我在这种情况下使用CSS3-如果在其他版本中有这种常见方法，请列出这些！）

现在，我手动定位不同的按钮：

.but1 {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e9e9e9) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #e9e9e9 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9');
    background-color:#ffffff;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#666666;
    font-family:Verdana;
    font-size:18px;
    font-weight:bold;
    font-style:normal;
    height:40px;
    line-height:40px;
    width:102px;
    text-decoration:none;
    text-align:center;
    position: absolute;
    right: 10px;
    top: 10px;
    bottom: 0px;
a.but:link {color:#FF00FF;}    /* unvisited link */
a.but:visited {color:#000000;} /* visited link */
a.but:hover {color:#FF0099;}   /* mouse over link */
a.but:active {color:#66FF33;}  /* selected link */
a.but:focus {color:#FF9900 }
}
.but:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #ffffff) );
    background:-moz-linear-gradient( center top, #e9e9e9 5%, #ffffff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#ffffff');
    background-color:#e9e9e9;
}
.but:active {
    position:relative;
    top:1px;
}
/* This button was generated using CSSButtonGenerator.com */


.but2 {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e9e9e9) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #e9e9e9 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9');
    background-color:#ffffff;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#666666;
    font-family:Verdana;
    font-size:18px;
    font-weight:bold;
    font-style:normal;
    height:40px;
    line-height:40px;
    width:102px;
    text-decoration:none;
    text-align:center;
    position: absolute;
    bottom: 0px;
    right: 130px;
    top: 10px;
a.but:link {color:#FF00FF;}    /* unvisited link */
a.but:visited {color:#000000;} /* visited link */
a.but:hover {color:#FF0099;}   /* mouse over link */
a.but:active {color:#66FF33;}  /* selected link */
a.but:focus {color:#FF9900 }
}
.but:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #ffffff) );
    background:-moz-linear-gradient( center top, #e9e9e9 5%, #ffffff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#ffffff');
    background-color:#e9e9e9;
}
.but:active {
    position:relative;
    top:1px;
}
.but3 {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e9e9e9) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #e9e9e9 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9');
    background-color:#ffffff;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#666666;
    font-family:Verdana;
    font-size:18px;
    font-weight:bold;
    font-style:normal;
    height:40px;
    line-height:40px;
    width:102px;
    text-decoration:none;
    text-align:center;
    position: absolute;
    bottom: 0px;
    right: 250px;
    top: 10px;
a.but:link {color:#FF00FF;}    /* unvisited link */
a.but:visited {color:#000000;} /* visited link */
a.but:hover {color:#FF0099;}   /* mouse over link */
a.but:active {color:#66FF33;}  /* selected link */
a.but:focus {color:#FF9900 }
}
.but:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #ffffff) );
    background:-moz-linear-gradient( center top, #e9e9e9 5%, #ffffff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#ffffff');
    background-color:#e9e9e9;
}
.but:active {
    position:relative;
    top:1px;
}
.but4 {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e9e9e9) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #e9e9e9 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9');
    background-color:#ffffff;
    -webkit-border-top-left-radius:6px;
    -moz-border-radius-topleft:6px;
    border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -moz-border-radius-topright:6px;
    border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-bottomright:6px;
    border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    -moz-border-radius-bottomleft:6px;
    border-bottom-left-radius:6px;
    text-indent:0;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#666666;
    font-family:Verdana;
    font-size:18px;
    font-weight:bold;
    font-style:normal;
    height:40px;
    line-height:40px;
    width:102px;
    text-decoration:none;
    text-align:center;
    position: absolute;
    bottom: 0px;
    right: 370px;
    top: 10px;
a.but:link {color:#FF00FF;}    /* unvisited link */
a.but:visited {color:#000000;} /* visited link */
a.but:hover {color:#FF0099;}   /* mouse over link */
a.but:active {color:#66FF33;}  /* selected link */
a.but:focus {color:#FF9900 }
}
.but:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #ffffff) );
    background:-moz-linear-gradient( center top, #e9e9e9 5%, #ffffff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#ffffff');
    background-color:#e9e9e9;
}
.but:active {
    position:relative;
    top:1px;
}

我觉得这个解决方案很笨拙且效率低下。

谢谢！

Answer 1

上面列出的示例中包含了一些内容。

这个小提琴在一起解决了所有问题：
DEMO

首先，嵌套你的.but＃classes，因为它们几乎相同：

CSS

.but1,
.but2,
.but3,
.but4 {
... code here ...
}

此外，在伪类之前，你的.but类之后缺少一个大括号：

CSS

  text-align:center;
  position: absolute;
  right: 10px;
  top: 10px;
  bottom: 0px;
a.but:link {color:...

读作：

text-align:center;
position: absolute;
right: 10px;
top: 10px;
bottom: 0px;
}

a.but:link {color:...

你已经在这里创建了非常好的WET代码...尝试并简化你的生活并且不要重复自己...在父级div中嵌套完全相同的按钮以及所有相同的属性（位置规则除外）他们根据需要。然后你可以轻松移动整个区块。

接受内置CSS按钮的方法？

1 个答案: