如何定位按钮sprites css [英] How to position Button sprites css

问题描述

.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:relative;
left:300px;
top:0px;

}

p2.button1{ 
position:absolute;
right:0px;
top:150px;

}

p3.button1{ 
position:absolute;
right:0px;
top:200px;

}

.button1:hover {
  width: 200px;
}

我尝试更改元素位置，但它不工作！它只是坐在屏幕的一部分。

I have tried changing the element positions yet it doesn't work ! it just sits on one part of the screen. how do i make it to show on my desired position ?

推荐答案

pg，p2，p3不是正确的HTML标签。可能你创建了这样的名称的ID，然后将其更改为：

pg, p2, p3 are not proper HTML tags. probably you created ID's with such names then change it to:

#pg .button1 {}

选择 position absolute 或 relative 。

这篇关于如何定位按钮sprites css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！