Question

当按钮处于<button>状态时，我希望我的:active元素的文本稍微向下/向右移动。我以为我可以通过修改按钮的内部padding来实现这一点，使其继续相加。

我的HTML：

<button>Hello</button><button>Goodbye</button>

这是我的CSS：

button {
    border: 1px solid #9f9b9a;
    border-radius: 5px;
    background: url("button.png") repeat-x;
    font-size: inherit;
    padding: 0.1em 0.5em 0.1em 0.5em;
    cursor: default;
}

button:hover {
    border-color: black;
    background-position: left -5px;
}

button:active {
    padding: 0.2em 0.4em 0 0.6em;
}

最后，这是我的jsFiddle：

http://jsfiddle.net/nQFHt/

我认为通过将内部填充总和垂直保持0.2em并且水平保持1em，按钮的状态将完全影响页面的布局，但是当我鼠标 - 向下Hello Goodbye按钮移动。

有没有更好的方法来获得我想要的效果？

照片管理：

enter image description here

Answer 1

您可以使用vertical-align修复line-height或padding，以免修改按钮的大小。

＆＃13;

	button {
	    border: 1px solid #9f9b9a;
	    border-radius: 5px;
	    background: url("button.png") repeat-x;
	    font-size: inherit;
	    padding: 0.1em 0.5em 0.1em 0.5em;
	    cursor: default;
	    vertical-align:top;
	}
	button:hover {
	    border-color: black;
	    background-position: left -5px;
	}
	button:active {
	    line-height:0.7em;
    padding: 0.6em 0.2em 0.1em 0.8em;
	}

＆＃13;

<button>Hello</button>
<button>Goodbye</button>

＆＃13;

不太确定你要找的是什么。

按钮应该移动还是只移动文本或其他东西？

Answer 2

至于移动按钮，问题应该是，通过更改其中一个按钮的填充，您也可以更改其大小。这就是为什么旁边的按钮也在移动。

解决方案是在每个按钮后插入<br />。结果，两个按钮不会彼此相邻显示。你可以通过在按钮周围包含一个像列表这样的元素并添加一个浮点数来保持正常：向左移动到<li>。

HTML

<ul>
   <li><button>Hello</button></li>
   <li><button>Goodbye</button></li>
</ul>

CSS

button {
    border: 1px solid #9f9b9a;
    border-radius: 5px;
    background: url("button.png") repeat-x;
    font-size: inherit;
    padding: 0.1em 0.5em 0.1em 0.5em;
    cursor: default;
}
button:hover {
    border-color: black;
    background-position: left -5px;
}

button:active {
    padding: 0.2em 0.4em 0 0.6em;
}

ul {
    list-style: none;
}

ul li {
    float: left;
}

我为你的http://jsfiddle.net/nQFHt/1/

添加了一个jsFiddle

Answer 3

添加：

button {
    float: left;
}

使用块元素这个问题似乎是固定的。

编辑：挖了一下之后，我的问题很明显。垂直填充对内联元素的使用方式不起作用。看看this article。

Answer 4

我建议您使用<a>链接代替按钮并设置样式，因为您可以更好地控制它们和许多选项。

这是我的例子： HTML：

<a href="#"><span>click ME</span></a>
<a href="#"><span>click ME too</span></a>

CSS：

a{
    border: 1px solid #9f9b9a;
    border-radius: 5px;
    background: url("button.png") repeat-x;
    font-size: inherit;
    padding: 0.1em 0.5em 0.1em 0.5em;
    cursor: default;
    text-decoration:none;
}
a:hover{        
    border-color: black;
    background-position: left -5px;
}
a:active div{
    position:relative;
    top:1px;
    left:1px;
}

这是我的jsFiddle：Here

样式按钮元素 - 添加文本偏移：活动

4 个答案: