宽度标签无效 html/css

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

Header 标签，如 h1 是块级元素，因此 "try" 延伸超过 parent 或 window 的宽度。

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

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

查看我在此处制作的 fiddle：https://jsfiddle.net/v3f13vtb/

Answer 2

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

Answer 3

您对 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

宽度标签无效 html/css

Width tag not working html/css

html

css

image

width