Question

我有this代码：

<a class="botton_menu" href="#">first</a>
<a class="botton_menu" href="#">second</a>
<a class="botton_menu" href="#">third</a>

a.botton_menu
{
    padding:0 14px 0 7px;
    font-family:Arial;
    font-weight:bold;
    font-size:50px;
    line-height:45px;
    background-color:#FF0000;
    color:#781a77;
    margin-bottom:3px;
    height:46px;
    letter-spacing: -3px;
    text-decoration:none;
    display:block;
}

并且我希望只要文本有红色背景颜色，直到屏幕尺寸（显示：块）。

我该怎么做？

Answer 1

display:block;是它导致它伸展的原因。

解决方案：

从display:block;更改为display:inline-block;（或者甚至使用默认值display:inline;首先将其设置为block的原因是什么？）
使用float:left;。
手动设置width属性。

显然第三个选项只有在你知道你想要的宽度时才有效。另外两种解决方案将使元素彼此相邻，而不是堆叠。在这两种情况下，您都需要告诉下一个元素掉到下一行。

使用display:inline-block;或display:inline;，可以使用换行符实现;使用<br>选项卡进行硬编码:after标记或CSS，并在其中添加换行符。使用float:left;，您需要添加使用clear:both;。

Answer 2

您必须在元素中创建一个元素：jsfiddle

<a><span>foo</span></a>

Answer 3

如果您坚持使用a元素display:block，则需要float:left {{1}}然后清除它们。然后background /元素将与内容一样长。

Answer 4

使用display:inline-block;并将<br/>放在代码之间， this 将解决您的问题。

如何阻止这种背景

4 个答案: