Question

可能是一个非常简单的问题，但这里有：

我有各种带有彩色背景的HTML标题。

问题在于，除非我指定一个特定的宽度，否则它们似乎总是占据它们当前所在空间的宽度的100％。是否有一个属性可以分配给宽度，这将强制它相对于标题的长度本身？

Answer 1

如果指定要呈现为内联元素的header元素，它只会增长到它的内容大小，请记住，尽管这可能会产生其他效果

<div id="header"></div>

#header {
    display: inline;
}

Answer 2

这里没有太多细节 - 我假设你的意思是：

<div id="header"><h1>My Title</h1></div>
<style>
#header {background:red;}
</style>

你的问题是h1标签长度未知？如果是这种情况，那么你可以设置H1的背景，也许可以添加一些填充......

<style>
#header h1 {background:red;}
</style>

Answer 3

您可以使用内联元素包含内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<style type="text/css"><!--
th{
    background-color: white;
}
th span{
    color: white;
    background-color: red;
}
--></style>
</head>
<body>

<table>
<tr>
    <th><span>A<span></th>
    <th><span>B<span></th>
    <th><span>C<span></th>
    <th><span>D<span></th>
</tr>
<tr>
    <td>Lorem</td>
    <td>Ipsum</td>
    <td>Dolor</td>
    <td>Sic</td>
</tr>
</table>

</body>
</html>

如何获取HTML标题的宽度以匹配文本内容？

3 个答案: