3

当按钮处于状态时，我希望<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按钮上按下鼠标时会四处移动。

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

图片：

在此处输入图像描述

4

4 回答 4

2

您可以修复vertical-align或不修改按钮line-height的padding大小。

	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;
	}
	
<button>Hello</button>
<button>Goodbye</button>

不太确定你在寻找什么。

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

于 2015-03-16T19:56:12.657 回答
0

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

<br />一个解决方案是在每个按钮之后插入一个。因此，这两个按钮不会并排显示。通过在按钮周围包裹一个像列表这样的元素并在<li>'s 中添加一个 float:left 应该没问题。

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

于 2013-10-14T08:53:34.773 回答
0

添加：

button {
    float: left;
}

使用块元素，这个问题似乎得到了解决。

编辑：经过一番挖掘，你的问题对我来说很清楚。垂直填充根本不适用于内联元素。看看这篇文章。

于 2013-10-14T08:54:17.043 回答
0

I suggest that you use <a> links in place of buttons and style them, since you have a better control over them and many options.

Here is my example: The HTML:

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

And the 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;
}

Here is my jsFiddle: Here

于 2013-10-14T09:05:30.813 回答