我正在使用 HTML5 文档类型。我已经创建了一个 span 标签并将文本颜色设置为红色，但是当我运行页面时它没有应用任何东西来跨越。但奇迹是它在 jsfiddle 中工作 http://jsfiddle.net/r9bP8/2/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{margin:0; padding:0; }
.wrapper{width:1024px; height:768px; position:relative; margin:0 auto; background:url(../images/.jpg) repeat top left}
header{
display:block; padding:0 125px;
background-color: #007DC4; text-align:center;
overflow:auto
}
header a:first-child{float:left; padding:15px 0}
header a:last-child{float:right; padding:15px 0}
.logo{ padding-top:8px ; display:inline-block }
.container{width:801px; height:700px; background-color:#FFF; margin:0 auto;
-webkit-box-shadow: 2px 2px #e1e1e1, -2px 0 2px #e1e1e1;
-moz-box-shadow: 2px 0 2px #e1e1e1, -2px 0 2px #e1e1e1;
box-shadow: 2px 0 2px #e1e1e1, -2px 0 2px #e1e1e1;
}
.home_menu{
width:500px; margin:0 auto; overflow:auto; position:relative
}
.test{ padding:35px 50px; width:150px; display:inline-block; float:left}
.test a{
width:150px;
float:left; line-height:150px;
background-color:#0091ce ;
border-radius:6px; text-align:center; vertical-align:middle;
}
.test span{
color:#F66
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<a href="#"><fhj</a>
<a href="#" class="logo">fh</a>
<a href="#">gj</a>
</header>
<div class="container">
<div class="home_menu">
<div class="test">
<a href="#"><img src="images/channels.jpg" width="59" height="60" alt="channels" style="vertical-align:middle" /></a><span>test</span></div>
<div class="test"><a href="#"><img src="images/.jpg" width="64" height="73" alt="" style="vertical-align:middle" /></a><span>uspan</span></div>
<div class="test"><a href="#"><img src="images/.jpg" width="99" height="78" alt="" style="vertical-align:middle" /></a><span>htu</span></div>
<div class="test"><a href="#"><img src="images/.jpg" width="76" height="49" alt="" style="vertical-align:middle" /></a><span>ggg</span></div>
<div class="test"><a href="#"><img src="images/.jpg" width="71" height="68" alt="" style="vertical-align:middle" /></a><span>tehhhst</span></div>
<div class="test"><a href="#"><img src="images/.jpg" width="70" height="68" alt="" style="vertical-align:middle" /></a><span>bgfg</span></div>
</div>
</div>
</div>
</body>
</html>
为什么它在运行页面时不起作用？
最佳答案
根据我的评论，我删除了复制时出现在 test a 和 test span 右大括号上的两个问号。 (可能是字符编码问题？)
我还添加了省略的分号和样式表的类型。
<style type="text/css">
body{margin:0; padding:0;}
.wrapper{width:1024px; height:768px; position:relative; margin:0 auto; background:url(../images/.jpg) repeat top left;}
header{
display:block; padding:0 125px;
background-color: #007DC4; text-align:center;
overflow:auto;
}
header a:first-child{float:left; padding:15px 0;}
header a:last-child{float:right; padding:15px 0;}
.logo{ padding-top:8px ; display:inline-block; }
.container{width:801px; height:700px; background-color:#FFF; margin:0 auto;
-webkit-box-shadow: 2px 2px #e1e1e1, -2px 0 2px #e1e1e1;
-moz-box-shadow: 2px 0 2px #e1e1e1, -2px 0 2px #e1e1e1;
box-shadow: 2px 0 2px #e1e1e1, -2px 0 2px #e1e1e1;
}
.home_menu{
width:500px; margin:0 auto; overflow:auto; position:relative;
}
.test{ padding:35px 50px; width:150px; display:inline-block; float:left;}
.test a{
width:150px;
float:left; line-height:150px;
background-color:#0091ce;
border-radius:6px; text-align:center; vertical-align:middle;
}
.test span{
color:#F66;
}
</style>
关于html - 跨度文本的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12581572/