How to get the width of a HTML header to match the textual content?_问答_开发者

How to get the width of a HTML header to match the textual content?

开发者 https://www.devze.com 2023-02-05 10:35 出处：网络

Probably an incredibly simple question, but here goes: I have various HTML headers with colored backgrounds.

相关专题：css

Probably an incredibly simple question, but here goes:

I have various HTML headers with colored backgrounds.

T开发者_JAVA技巧he problem is that unless I specify a specific width, they always seem to take 100% the width of the space they are currently in. Is there an attribute I can assign to the width which will force it to adjust relative to the length of the title itself?

If you specify the header element to render as an inline element, it will only grow to the size of it's contents, bear in mind though this may have other knock on effects

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

#header {
    display: inline;
}

There's not much detail here - I'm assuming you mean something like:

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

and your problem is the h1 tag is of an unknown length? If that's the case, then you could just set the background of the H1, and perhaps add some padding...

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

You can enclose contents with inline elements:

<!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>