Html 如何在不增加

我正在尝试复制www.codecademy.com的标题，但“升级到专业版”按钮有问题。根据我下面的教程，我只是使用了一个，因为它是纯视觉的

为了使标题居中，我使用了行高：50px 50px是放置标题的高度。一切都很好，直到我添加一个边框。。。对于代码中的行高，边框采用父标题的高度，即50px，而不是像没有行高时那样包装

使JSFIDLE结果屏幕变大以了解我的意思：

线的高度是我唯一能使跨度垂直居中的方法，没有其他方法对我有效

如何在保持线条高度的同时将边框环绕跨度？

而不是：

     <span id="span1">Catalog</span>
     <span id="span1">Community</span>
     <span id="spanUpgrade">Upgrade to Pro</span>

你可以这样做：

     <span class="span1">Catalog</span>
     <span class="span1">Community</span>
     <span class="span1"><span id="spanUpgrade">Upgrade to Pro</span></span>

span1是一个菜单项，spanUpgrade是特定于某个项目的内容

---

只需添加一个中间div？@Maxime Chéramy我试过了，但随之而来的问题是，边界会将其高度延伸到该div，我可以使其看起来像是正常的，但希望有一种方法可以使其合法地包装文本。我特别建议删除像这样的ID的使用。你是对的！我会做很多不同的事情。。。但是，是的，使用相同ID的多个元素不是一个好主意：