带数字和文字的按钮

Question

我有一个HTML按钮，我必须像智能手机拨号盘一样显示它。喜欢数字和ABC等

<a href="" class="button">
    1
    <span>ABC</span>
</a>

一切都很好，除了文本在按钮中不可见。我怎么解决这个问题？

Answer 1

您只需要更改跨度的样式以正确包装。

将display: inline-block;添加到你的a span选择器，使它看起来像这样：

    a span {font-size:8px;
    text-transform:uppercase;
    display:block;
    text-align:center;
    line-height:0em;
    margin-top:-5px;
    font-style:italic;
    display: inline-block;
}

最好的解决方案通常是最简单的。在这种情况下，只需添加一行。

Answer 2

您需要做的就是在按钮元素中添加height。这是一个更新的小提琴：http://jsfiddle.net/2nv7A/8/

.button {
    ...
    height: 100px;
}

Answer 3

试试这个：

a span {
    font-size:8px;
    text-transform:uppercase;
    display:block;
    text-align:center;
    line-height:0em;
    margin-top:-15px; // pulled up the text a little more
    margin-bottom:10px; // pushed down the margin at the bottom
    font-style:italic;
}

摆弄这些，你会找到最适合你的

DEMO HERE

Answer 4

你可以使用overflow属性来显示文本切断，然后可以管理元素的高度。

 .button {
        position: relative;
        width: 62px;

溢出：可见;

    /*border: 1px solid black;*/
    border: 1px solid black;
    border-radius: 12px;
    /*border-radius: 7px;*/
    Outline: none;
    margin-left:2px;
    margin-bottom:7px;
    border-color:#ccc;
}

Answer 5

如果你移除你的定位，减少你的行高，然后删除你的跨度高度（设置为0，防止它出现），那么它似乎工作正常。 Here

.button {
    width: 62px;
    /*border: 1px solid black;*/
    border: 1px solid black;
    border-radius: 12px;
    /*border-radius: 7px;*/
    Outline: none;
    margin-left:2px;
    margin-bottom:7px;
    border-color:#ccc;
}

a{
display:inline-block;
vertical-align:top;
text-align:center;
text-decoration:none;
font-weight:bold;
line-height:25px;
overflow:hidden;
    font-size:12px;
}


a span {font-size:8px;
text-transform:uppercase;
display:block;
text-align:center;
font-style:italic;
}

Answer 6

摧毁.a的line-height属性并增加a的line-height。跨度。

Answer 7

您需要更改跨度的边距。使用这个CSS：

a span {font-size:8px;
    text-transform:uppercase;
    display:block;
    text-align:center;
    line-height:0em;
    margin-top:-10px;
    font-style:italic;
    margin-bottom:15px;
}

Answer 8

这是因为你为display:block标签设置了span，它应该是display:inline-block;：

a span {
  font-size:8px;
  text-transform:uppercase;
  display:inline-block; /* <---- here */
  text-align:center;
  line-height:0em;
  margin-top:-5px;
  font-style:italic;
}

Fiddle