html的标签之间带不带空格或换行, 为什么对样式有影响?
0
悬赏园豆：5
[已解决问题]
解决于 2016-09-10 10:18
第一行和第三行是标签之间不带空格或换行等空白字符的, 中间那一行是标签之间带空格的, 样式居然不一样?
这是为什么呢?我影响中一直被教育为html的标签之间的空白字符不被解析的呀
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <style> .progress > *, .progress > *:after, .progress >*:before { margin: 0; padding: 0; box-sizing: border-box; } /* Form Progress */ .progress { width: 100%; margin: 0px auto; text-align: center; } .progress .circle, .progress .bar { display: inline-block; background: #fff; width: 40px; height: 40px; border-radius: 40px; border: 1px solid #d5d5da; vertical-align: top; } .progress .bar { position: relative; width: 80px; height: 6px; margin: 0 -5px 17px -5px; border-left: none; border-right: none; border-radius: 0; top: 16px; vertical-align: top; } .progress .circle .label { display: inline-block; width: 32px; height: 32px; line-height: 32px; border-radius: 32px; margin-top: 3px; color: #b5b5ba; font-size: 9pt; } .progress .circle .title { color: #b5b5ba; font-size: 13px; line-height: 18px; margin-left: -30px; display: block; width: 100px; margin-top: 5px; } /* Done / Active */ .progress .bar.done, .progress .circle.done { background: #eee; } .progress .bar.active { background: linear-gradient(to right, #EEE 40%, #FFF 60%); } .progress .circle.done .label { color: #FFF; background: #8bc435; box-shadow: inset 0 0 2px rgba(0, 0, 0, .2); } .progress .circle.done .title { color: #444; } .progress .circle.active .label { color: #FFF; background: #0c95be; box-shadow: inset 0 0 2px rgba(0, 0, 0, .2); } .progress .circle.active .title { color: #0c95be; } </style> </head> <body> <div class="progress"><div class="circle active "><span class="label">0</span><span class="title">新盘成交报告提交</span></div><span class="bar"></span><div class="circle "><span class="label">1</span><span class="title">秘书审核</span></div><span class="bar"></span><div class="circle "><span class="label">2</span><span class="title">分行经理审核</span></div><span class="bar"></span><div class="circle "><span class="label">3</span><span class="title">门店/区域经理审核</span></div><span class="bar"></span><div class="circle "><span class="label">4</span><span class="title">运营总监审核</span></div><span class="bar"></span><div class="circle "><span class="label">5</span><span class="title">项目拓展部点位审核</span></div></div> <br><br><br><br> <div class="progress"> <div class="circle active "> <span class="label">0</span> <span class="title">新盘成交报告提交</span> </div> <span class="bar"> </span> <div class="circle "> <span class="label">1</span> <span class="title">秘书审核</span> </div> <span class="bar"> </span> <div class="circle "> <span class="label">2</span> <span class="title">分行经理审核</span> </div> <span class="bar"> </span> <div class="circle "> <span class="label">3</span> <span class="title">门店/区域经理审核</span> </div> <span class="bar"> </span> <div class="circle "> <span class="label">4</span> <span class="title">运营总监审核</span> </div> <span class="bar"></span> <div class="circle "> <span class="label">5</span> <span class="title">项目拓展部点位审核</span> </div> </div> <br><br><br><br> <div class="progress"><div class="circle active "><span class="label">0</span><span class="title">新盘成交报告提交</span></div><span class="bar"></span><div class="circle "><span class="label">1</span><span class="title">秘书审核</span></div><span class="bar"></span><div class="circle "><span class="label">2</span><span class="title">分行经理审核</span></div><span class="bar"></span><div class="circle "><span class="label">3</span><span class="title">门店/区域经理审核</span></div><span class="bar"></span><div class="circle "><span class="label">4</span><span class="title">运营总监审核</span></div><span class="bar"></span><div class="circle "><span class="label">5</span><span class="title">项目拓展部点位审核</span></div></div> </body> </html>
最佳答案
0
这不是样式不一样.是多了几个空格.
html会把所有的空格当成一个空格.
收获园豆：5
还真是...
其他回答(3)
0
你的原因不知道为什么，但是我所知道的是，标签之间的空白字符（应该说文字，包括空白字符而已）在有的浏览器里面，是作为一个类型为TEXT_NODE的标签（节点）的。。。
0
行内元素和块级元素是不一样的~你的代码排版太乱了。
0
是不是用记事本编辑，有乱码。
