Question

我正在为学校做这项任务，我需要支持标语和小图片背后的背景，以便完美地包围这些文字。但是，我无法使宽度标签起作用。请帮我找到这个问题的根源。抱歉格式不佳。我有点紧张。

<!DOCTYPE html>
<html>
<head>
<title>MNSportsInc</title>
</head>
<center><p><font size="8">Minnesota Sports Inc.</font></p></center>
<style>
    h1 {color: white; background: black; font-family: times; font-size: 
120%; width: 300}
    h2 {color: white; background: black; font-family: times; font-size: 
120%; width: 500}
    h3 {color: white; background: black; font-family: times; font-size: 
120%; width: 500}
    h4 {color: white; background: black; font-family: times; font-size: 
120%; width: 500}
        h5 {color: white; background: black; font-family: times; font-size: 
120%; width: 500}
    h6 {color: white; background: black; font-family: times; font-size: 
120%; width: 500}
</style>
<body>
<center>
    <h1><a href="https://www.mlb.com/twins"><img src="Twins.gif"></a>Twins 
get wins!<a href="https://www.mlb.com/twins"><img src="Twins.gif"></a></h1>
<!--Twins-->
    <h2><a href="https://www.nhl.com/wild"><img src="Wild.png"></a>Crack a 
smile for the Wild.<a href="https://www.nhl.com/wild"><img src="Wild.png">
</a></h2><!--Wild-->
    <h3><a href="http://www.vikings.com/"><img src="Vikings.png"></a>Buy 
things for the Vikings.<a href="http://www.vikings.com/"><img 
src="Vikings.png"></a></h3><!--Vikings-->
    <h4><a href="http://www.nba.com/timberwolves/"><img src="Wolves.jpg">
</a>Fans pull the Wolves!<a href="http://www.nba.com/timberwolves/"><img 
src="Wolves.jpg"></a></h4><!--Timberwolves-->
    <h5><a href="http://www.gophersports.com/"><img src="UofM.png"></a>Beat 
the Gophers? No sir!<a href="http://www.gophersports.com/"><img 
src="UofM.png"></a></h5><!--UofM-->
    <h6><a href="http://crimson-activities.com/"><img src="Crimson.jpg">
</a>The Crimson have Risen.<a href="http://crimson-activities.com/"><img 
src="Crimson.jpg"></a></h6><!--Crimson-->
</center>
</body>
</html>

Answer 1

width属性（非标记）的所有设置都缺少一个单位，因此根据CSS规范忽略这些设置。如果你追加，它们会起作用它们的px单位（对于CSS像素）：width: 500px。像素是你可能想要使用的。这是一个完全不同的问题，如何设置背景，使其“完美地包围词语”;您可能需要一种不同的方法，例如使用内联元素（根据需要采用尽可能宽的宽度）。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>MNSportsInc</title>
</head>
<center><p><font size="8">Minnesota Sports Inc.</font></p></center>
<style>
    h1 {color: white; background: black; font-family: times; font-size: 
120%; width: 300px}
    h2 {color: white; background: black; font-family: times; font-size: 
120%; width: 500px}
    h3 {color: white; background: black; font-family: times; font-size: 
120%; width: 500px}
    h4 {color: white; background: black; font-family: times; font-size: 
120%; width: 500px}
        h5 {color: white; background: black; font-family: times; font-size: 
120%; width: 500px}
    h6 {color: white; background: black; font-family: times; font-size: 
120%; width: 500px}
</style>
<body>
<center>
    <h1><a href="https://www.mlb.com/twins"><img src="Twins.gif"></a>Twins 
get wins!<a href="https://www.mlb.com/twins"><img src="Twins.gif"></a></h1>
<!--Twins-->
    <h2><a href="https://www.nhl.com/wild"><img src="Wild.png"></a>Crack a 
smile for the Wild.<a href="https://www.nhl.com/wild"><img src="Wild.png">
</a></h2><!--Wild-->
    <h3><a href="http://www.vikings.com/"><img src="Vikings.png"></a>Buy 
things for the Vikings.<a href="http://www.vikings.com/"><img 
src="Vikings.png"></a></h3><!--Vikings-->
    <h4><a href="http://www.nba.com/timberwolves/"><img src="Wolves.jpg">
</a>Fans pull the Wolves!<a href="http://www.nba.com/timberwolves/"><img 
src="Wolves.jpg"></a></h4><!--Timberwolves-->
    <h5><a href="http://www.gophersports.com/"><img src="UofM.png"></a>Beat 
the Gophers? No sir!<a href="http://www.gophersports.com/"><img 
src="UofM.png"></a></h5><!--UofM-->
    <h6><a href="http://crimson-activities.com/"><img src="Crimson.jpg">
</a>The Crimson have Risen.<a href="http://crimson-activities.com/"><img 
src="Crimson.jpg"></a></h6><!--Crimson-->
</center>
</body>
</html>
htmlcssimagewidth

＆＃13;

Answer 2

标题标记，例如h1是块级元素，因此＆＃34;尝试＆＃34;伸展父或窗口的宽度。

您可以将其display样式更改为阻止以更改此内容：

h1 {color: white; background: black; font-family: times; font-size: 
120%; width: 300px;display:inline-block}

请看我在这里做的小提琴：https://jsfiddle.net/v3f13vtb/

Answer 3

你应该把你的CSS样式放在一个不同的文件中，然后链接到它，我认为你的样式不是内联工作的原因是因为你没有告诉它该做什么。 500（什么）500px？ 500％？尝试更加语义地编写它，看看会发生什么。

宽度标签不起作用html / css

3 个答案: