3

有没有办法关闭这个功能？的内容<button>始终垂直居中，这与常规 HTML 标记中发生的情况相反。

演示：http: //jsfiddle.net/HbqnR/

我想<button>表现得像<a>，文本在按钮的左上角。

我正在寻找特定于 WebKit 的修复程序，也许有一些-webkit-*css 属性可以控制这种行为。黑客是受欢迎的，但不使用额外的标记！

先感谢您 ：）

.button
{
    display:inline-block;
    height:200px;
    border:4px gainsboro outset;
    background:silver;
    vertical-align:middle;
    padding:20px;
    box-sizing:border-box;
    text-decoration:none;
    width:200px;
    text-align:left;
}

<button class="button">&lt;button&gt;</button>
<a href="http://www.google.com" class="button">&lt;a&gt;</a>
4

5 回答 5

2

添加这个：

button:before {
    content:'';
    display:block;
    margin-top:-50%;
}

见http://jsfiddle.net/r6yXw/

而且，如果您希望它仅适用于基于 webkit 的浏览器，请将其包装在

@media screen and (-webkit-min-device-pixel-ratio:0) { ... }

见http://jsfiddle.net/r6yXw/1/

于 2013-10-24T07:16:41.017 回答
0

你不能。并非没有引入一个<span>里面的<button>和使用定位：

<button class="button"><span>&lt;button&gt;</span></button>

然后将以下内容添加到.button：

.button
{
    /* ... */
    position:relative;
}

.button > span {
    position: absolute;
    top: 20px;
    left: 20px;
}

演示

如果要保持 HTML 完整，也可以使用 JavaScript 修改文档：

$('button.button').wrapInner('<span>');

请注意，如果 JavaScript 被禁用，它将无法工作:)

于 2013-10-24T04:14:01.577 回答
0

我看到你没有要求额外的标记，但如果你决定走那条路，一个快速的想法是使用定位和一个额外的元素。

button {
  position: relative;
}

button > span {
  position: absolute;
  top: 0;
}

<button><span>&lt;button&gt;</span></button>
于 2013-10-24T03:47:15.023 回答
0 
button {
  height: 100px;
  display: flex;
}
于 2020-11-02T02:47:17.307 回答
-1

看看这个：P JSFIDDLE DEMO

   .button
{
    display:block;
    height:200px;
    border:4px gainsboro outset;
    background:silver;
    vertical-align:top;
    padding:20px;
    box-sizing:border-box;
    width:200px;
    text-align:left;
    text-indent: 0;
    white-space: normal;
    word-spacing: 0px;
    letter-spacing: 0px;
    float: left;
    top:0;
}

它可能工作嘿。我真的不知道你需要这个按钮做什么。但这就像你之前问的一样。在这里用过。

<title>Documento sin título</title>
<body>
<form id="form1" name="form1" method="post" action="">
  <button class="button">tODAY WE ARE HERE WONDERING WHAT TO DO<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></button>
</form>
</body>
于 2013-10-24T04:06:33.600 回答