获取背景的宽度与文本相同，但高度不同

我试图在纯CSS（无图像）中获得一定的外观。获取背景的宽度与文本相同，但高度不同

我所拥有的是：

<h2> 
    <a>TITLE</a> 
</h2>

我想为文本“标题”有一个黑色的背景是相同的宽度为文本，但不同的高度。

我曾尝试这是各种排列：（即跨越在链接，跨度中的H 2，H 2显示内联和跨度的块）

<h2 class="title section-title"> 
    <a href="<?php echo site_url(); ?>/artwork/illustrations" > 
     Illustrations<span class="title-bg"></span> 
    </a> 
</h2>

如果我的宽度正确的，我可以因为跨度是内联元素，所以不会改变高度。如果我通过将跨度设置为一个块来获得高度，我无法将宽度改为文本的宽度，因为它现在是一个块级元素，并且扩展为整个页面的宽度。

任何想法，或将我只需要使用图像？

来源

2012-07-12 Squadrons

对于那些想知道如何设置blockquote宽度（需要适合在图片左侧）的用户，请使用* display：block;溢出：隐藏; * – JinSnow 2015-05-16 11:26:38

将position: relative;应用于<a>和position: absolute;至.title-bg<span>。然后根据需要设置top，left至0，以及width和height。

事情是这样的：http://jsfiddle.net/minitech/3uzbV/

来源

2012-07-12 16:04:00 Ryan

使用display:inline-block;。

参见this fiddle。

HTML：

<h2><a>Hello.</a></h2>

CSS：

h2 { 
    display:inline-block; 
    height:60px; 
    background-color:blue; 
    color:white; 
}

来源

2012-07-12 16:05:20

CSS：

a { 
    font-size:1em; 
    padding:1em 0 1em 0;/*set top and bottom padding to make up extra height*/ 
    background-color:#063; 
}

试试这个。即使内联元素也可以有填充。

来源

2012-07-12 16:06:21 Dpolehonski

我使用的最简单的方法是line-height。

h2 a {color:#fff; line-height:40px; display:inline-block; background:#333;}

这是jsFiddle。

来源

2012-07-12 16:12:07

获取背景的宽度与文本相同，但高度不同

回答

相关问题