你如何定位CSS按钮

时间:2013-03-17 20:10:58

标签: html

    .button1{


      background: #E68A00 url(wooden.jpg) repeat-x;
      border: 2px solid #eee;
      height: 28px;
      width: 115px;
      margin: 50px 0 0 50px;
      padding: 0 0 0 7px;
      overflow: hidden;
      display: block;
      text-decoration:none;
      font-family: 'Sacramento', cursive;
      color : white;
      font-size: 30px;

      /*Rounded Corners*/
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    /*Gradient*/
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

    /*Transition*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    transition: All 0.5s ease;


    }

    #pg .button1{ 
    position: absolute
    left:340px;
    top:50px;

    }

    #p2 .button1{ 
    position:relative 
    left:340px;
    top:50px;

    }

    #p3 .button1{ 
    position:relative 
    left:40px;
    top:50px;

    }

    .button1:hover {
      width: 200px;
    }


 <a class="button1 pg " href="...">Small $14</a>
    <a class="button1 p2" href="...">Medium $15</a>
    <a class="button1 p2" href="...">Large $16</a>

我今天发布了这个问题超过两次!仍然没有一个有效的解决方案上面的代码工作,但当我尝试更改左侧和顶部值时,没有任何反应:(。 基本上我想改变共享相同属性(设计)的3个按钮的位置。它太烦人了,过去3个小时我一直在这里寻找解决这个问题的方法。请帮忙!

1 个答案:

答案 0 :(得分:0)

您没有id个属性,但是您希望# ID选择器有效吗?

要选择第一个按钮,您需要.button1.pg

之类的内容