请问老师,我的分割线为什么显示不出来呀?

请问老师,我的分割线为什么显示不出来呀?

老师可以之间看.fengexian这个样式

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    *{margin: 0;padding: 0;}
    a{text-decoration: none;}
    body{background: rgb(150,150,200);}
    .big{width: 100%;height: 100px;background: black;position: fixed;}
    .tit-li{float: right;width: auto;color:white;font-size: 30px;line-height: 100px;margin-right: 100px;}
    .logo{float: left;}
    .foot{width:100%;height: 100px;background: black;position: fixed;bottom: 0px;}
    .foot-ul{margin:0 auto;width: 1100px;}
    .foot-li{color:white;font-size: 30px;line-height: 100px;margin-right: 100px;float: left;}
    .foot-li:nth-child(5){margin-right: 0px;}
    .main{padding-top: 100px;width: 80%;margin: 0 auto;font-size: 30px;}
    .left{float: left;width: 25%;padding-top: 50px}
    .middle{float: left;width: 25%;margin-left: 3%;padding-top: 50px}
    .fengexian{width: 1%;background: orange;float: left;height: 800px;margin: 0 3%;}
    .right{float: right;width: 40%;padding-top: 50px}
    .h3-li{background: pink;}
    .input{width: 300px;height: 50px;}
    .submit{width: 300px;height: 50px;background: red;}
  </style>
</head>
<body>
  <div class="big">   
   <div class="logo">
      <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
    </div>
    <div class="tit">
      <div class="tit-li">手记</div>
      <div class="tit-li">猿问</div>
      <div class="tit-li">实战</div>
      <div class="tit-li">职业路径</div>
      <div class="tit-li">课程</div>
    </div>
  </div>
  <div class="main">
    <div class="left">
      <h1>课程推荐</h1>
      <p><span class="h3-li">职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>
      <p><span class="h3-li">职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>
      <p><span class="h3-li">职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>
      <p><span class="h3-li">职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>
      <p><span class="h3-li">职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>
    </div>
    <div class="middle">
      <h1>课程推荐</h1>
      <p><span class="h3-li">职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>
      <p><span class="h3-li">职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>
      <p><span class="h3-li">职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>
      <p><span class="h3-li">职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>
      <p><span class="h3-li">职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>
    </div>
    <div class="fengexian"></div>
    <div class="right">
      <h1>登录</h1>
      <br><br>
      <form>
        <input class="input" type="" name="" value="" placeholder="请输入登录邮箱/手机号">
        <br><br>
        <input class="input" type="text" name="" value="" placeholder="请输入密码">
        <br><br>
        <input class="submit" type="submit" value="提交">
      </form>

    </div>
  </div>
    <div class="foot">
      <div class="foot-ul">
      <div class="foot-li">网站首页</div>
      <div class="foot-li">网站首页</div>
      <div class="foot-li">网站首页</div>
      <div class="foot-li">网站首页</div>
      <div class="foot-li">网站首页</div>
      </div>
    </div>
</body>
</html>

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

用Chrome测试你的代码之后显示如下:

http://img1.sycdn.imooc.com//climg/5a7d03c9000183ef18990752.jpg

这个分割线是可以显示出来的!建议你用主流浏览器测试一下,如果还有问题,可以继续提问哦!

  • qq_Toloveyousel_0 提问者 #1
    非常感谢!
    2018-02-09 11:31:30
  • qq_Toloveyousel_0 提问者 #2
    不好意思老师 我贴错代码了。我的另个代码的分割线样式是这样的。 .fengexian{width: 1%;background: orange;float: left;height: 100%;margin: 0 3%;} 就是密封线的高度我设成了100% 这样显示不出来,请问老师是为什么呀?
    2018-02-09 11:34:50
  • 如果给fengexian设置高度为100%,是相对于父级的100%,而fengexian的父级是main容器,你并没有给父级容器设置固定高度,所以在这里是不起作用的。设置一下main的高度就可以了。
    2018-02-09 11:40:46
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师