删除跨度和文本元素之间的空间

我试图通过添加文本元素make使标题的背景颜色看起来像一个矩形的语音气泡。在下面，您可以看到背景形状的跨度文本和◥的样式。但是这在边界的底部和◥之间创造了一个空白空间，我希望两者排成一行，看起来像是一个讲话泡泡。删除跨度和文本元素之间的空间

失败的图像在行动。 http://i.imgur.com/1T09F.png

{block:Link}  
    <h1><span class="Headers"><a href="{URL}" {Target}>{Name} ☞</a></span> 
     <div class="triangle">◥</div> 
    </h1> 
{block:Description}{Description}{/block:Description}  
{/block:Link} 


.triangle{ 
    margin-left: 10px; 
    font-size: 35px; 
    color: #123033; 
} 
span.Headers{ 
    display: block; 
    background-color: #123033; 
    padding: 8px 
}

我试图特技与添加其中的字体大小是0的母体基团，并没有工作。也没有将标题上的边距设置为0.将◥div放在同一行上也没有做任何事情。我花了大约一个小时来看看其他问题，看看我能做些什么，但我找不到解决方案，但如果我错过了一些明显的东西，我就可以原谅我。

来源

2012-09-10 user1659445

你是说，像这样：http://jsfiddle.net/QzajU/？ – aroth

使用文本创建效果是不可靠的。不同的设备会以不同的方式呈现，这不是你想要的。

就你的情况而言，最好使用具有相同颜色的图像，将其放在标题下方的<div/>，以确保它们相互接触。然后，在左侧添加一些填充，就像您对.triangle样式所做的那样。

我已经创建了一个图像供您使用：Grab it here

总而言之，你的标记应该是这样的：

HTML：

{block:Link} 
    <div class="header"> 
     <h1><a href="{URL}" {Target}>{Name} ☞</a></h1> 
     <div class="triangle"></div> 
    </div> 
{block:Description}{Description}{/block:Description}  
{/block:Link}

CSS：

div.header > h1 { 
    background-color: #123033; 
    padding: 8px 
} 

div.header > div.triangle { 
    background: url('Arrow.png') top left no-repeat; 
    height: 50px; 
    padding-left: 10px 
}

请让我知道这是否适合你。

来源

2012-09-10 11:09:06

迈克尔，你是男人！有了这个，我可以在盒子下面找到那个三角形，谢谢。最后一个问题给你：当我使用填充 - 离开三角形实际上根本没有显示（可能隐藏在框中），我将它改为填充顶部，它确实出现，但我无法同时得到因此我的三角形卡在h1盒子的左侧。有什么建议么？ – user1659445

尝试在CSS中给出三角形块的高度为50px，并忽略任何上部填充。如果有任何重叠，请确保H1和三角块都设置为“display：block”。我昨天试着编辑我的答案，但现在看到它失败了。 –

我现在编辑了我的答案以反映。你确定它找到了'Arrow.png'图片吗？ –

如果你能使用生成的内容（我想，要看你的网站的用户），那么我会建议（与演示的目的稍作修改HTML）：

<h1><span class="Headers"><a href="#something">a name</a></span></h1>

的以下CSS：

h1 { 
    display: block; 
    position: relative; 
    background-color: #ffa; 
    padding: 0.5em; 
} 

h1::after { 
    content: ''; 
    border: 1em solid #ffa; 
    position: absolute; 
    top: 100%; 
    left: 2em; 
    border-bottom-color: transparent; 
    border-left-color: transparent; 
}

JS Fiddle demo。

就兼容性而言caniuse表示生成的内容在版本8以上的IE中受支持。

参考文献：

CSS generated content compatibility, from caniuse.com。

来源

2012-09-10 12:05:55

删除跨度和文本元素之间的空间

回答

相关问题