html - 简单的表不会变大

Question

请注意边栏顶部的彩色表格，上面写着 LIFESTYLE。

文本不会垂直对齐到中间，并且该表格不会变得更短。

它基本上是 Joomla 中带有 Gantry 和 K2 的自定义 html 模块，我将一些 PHP 放入（使用 Sourcerer），因此它根据一组颜色选择它的表 bg 颜色。简单吧？

必须有一些边距，填充，某处的东西，我找不到它。有任何想法吗？

Answer 1

老实说，我不知道为什么会这样，但这似乎解决了这个问题......

替换以下内容：

<div class="titlebars">
    <font color="#FFFFFF">LIFESTYLE</font>
</div>

和：

<span class="titlebars">
    <font color="#FFFFFF">LIFESTYLE</font>
</span>

---

编辑

问题是<br>后面的标签<div>：

<td style="vertical-align: middle; width: 100%; line-height: normal; margin: 0px 0px 0px; padding: 0px; cellpadding=0 cellspacing=0"> 
    <div class="titlebars">
        <font color="#FFFFFF">LIFESTYLE</font>
    </div> 
<br> <----- THIS IS THE PROBLEM
</td>

删除它，单元格将按照您的意愿运行。

Answer 2

只需将您的.titlebarsdiv 声明为display:inline-block，添加一些填充以稍微填充该标题，您就应该准备就绪：

CSS

.titlebars {
    display: inline-block;
    font-size: 30px;
    font-weight: 800;
    margin: 0;
    padding: 5px 0;
}

还有，<font>标签？我相信它们已被弃用，因此您可以改用p标签并为其设置样式。