宽度标签不起作用 html/css答案

【问题标题】：Width tag not working html/css宽度标签不起作用 html/css
【发布时间】：2017-10-18 17:47:00
【问题描述】：

我正在为学校做这项作业，我需要将标语和小图片背后的背景放在一边，以便完美地包围文字。但是，我无法让宽度标签工作。请帮我找到这个问题的根源。很抱歉格式不好。我有点时间紧迫。

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

【问题讨论】：

看起来您需要提供您想使用的度量单位，例如 px、em、pt、%、in、cm、mm 等。
请注意，您的学校从 20 年前开始教您 HTML...
您正在尝试在标签上应用宽度... 标签没有宽度属性.. 请阅读w3schools.com
增加标签的字体大小..

标签： html css image width

【解决方案1】：

width 属性（不是标签）的所有设置都缺少单位，因此根据 CSS 规范，这些设置将被忽略。如果您附加例如，它们会起作用px 单位（用于 CSS 像素）给他们：width: 500px。像素是您可能打算使用的。如何设置背景以“完美地包围文字”是一个完全不同的问题；您可能需要一种不同的方法，例如使用内联元素（根据需要采用尽可能多的宽度）。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

标题标签，如h1 是块级元素，因此“尝试”延伸到父窗口或窗口的宽度。

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

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

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

【讨论】：