float:left写成了float-left
color:red写成了clolr:red
href=#"少写了半个引号
结束</li>标签没有写
</body>写成了</boyd>
然后说一下为什么你后面的字为什么会动,因为你的a标签和a标签经过的宽高不一样,当然会动了。比如,你想想,本来a宽50px,你鼠标指上去是宽100px了,它后面当然会往右移啦。所以,你只要保持a和a:hover宽高一致就不会动来动去了。
例如去掉a:hover里的width:50pxheight:50px
根据字面意思,给出这种解决方案,看看是否合
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style>
.box {
width: 400px
display: flex
align-items: center
}
</style>
</head>
<body>
<div class="box">
<p>我是左边文字</p>
<p><img src="images/20150813115845612.jpg" style="width:150px" /></p>
<p>我是右边文字</p>
</div>
</body>
</html>