将文本与按钮顶部对齐，而不在其中使用跨度

Posted 2023-03-05

【中文标题】将文本与按钮顶部对齐，而不在其中使用跨度

【英文标题】：align text to top of a button without using a span inside it

【发布时间】：2014-03-10 05:49:44

【问题描述】：

我想将文本垂直对齐到按钮的顶部，但我不想在按钮内使用任何 span 或 div。我该怎么做？ vertical-align:top 没有帮助

按钮内的文本将是多行的，它不是固定的。文本的长度可以变化....它可以只占据第一行或多行..所以我无法修复一些填充

【问题讨论】：

你试过padding-top:0px;吗？

【参考方案1】：

将按钮的padding-bottom 设置为75%。这会将文本向上推。

【参考方案2】：

如果您想让某些东西粘在顶部，您只需向按钮添加内边距，然后去掉按钮顶部的内边距即可。

.btn  padding: 10px; padding-top: 0px;

这里是一个例子：http://jsfiddle.net/LJ3NL/

【参考方案3】：

您可以将line-height 设置为button，而不是设置padding-bottom。这会将文本垂直对齐到顶部。

【讨论】：

将line-height 设置为什么？

将 line-height 设置为 button 以移除 button 中的顶部间距

【参考方案4】：

试试这个

<input type="button" class="button" value="button" />

CSS：

.button 
    background: #000000;
    color: #FFF;
    padding-bottom:60px;
    height:100px;
    

DEMO

【讨论】：

所有多余的样式是怎么回事？

【参考方案5】：

请这个 css 试试看

  input height:auto; padding-bottom:30px;