zoukankan      html  css  js  c++  java
  • table的奇妙之处

    在很多场合,你会发现,当你需要模拟  select  下拉框的时候,内部盒子设置  float,由于外部的  div  设置了  overflow:hidden  以适应内部元素高度,但这样下拉框就会被隐藏,如何设置  z-index  都无效,那该如何是好呢???

    <div class="left">
    <div class="t_left">供应商来源</div>
    <div class="t_right">
    <div class="inline_block select_mormal select_p">
    <input type="text" class="select_input block" value="供货商来源">
    <i></i>
    <ul class="select_list" style="display: none;">
      <li>未知</li>
      <li>线上资源</li>
      <li>登门拜访</li>
      <li>陌生拜访</li>
      <li>招商资源</li>
      <li>公司资源</li>
      <li>个人资源</li>
      <li>电话资源</li>
    </ul>
    </div>
    </div>
    </div>

    后来我发现,神奇的  table  可以完美解决这个问题,td  可以不用设置  overflow:hidden  

    <table class="table table-bordered">
    <tr>
    <td>
    <div class="left">
    <div class="t_left">供应商来源</div>
    <div class="t_right">
    <div class="inline_block select_mormal select_p">
    <input type="text" class="select_input block" value="供货商来源">
    <i></i>
    <ul class="select_list pur_supplier_come_from_ul sbar" style="display: none;">
    <li>未知</li>
    <li>线上资源</li>
    <li>登门拜访</li>
    <li>陌生拜访</li>
    <li>招商资源</li>
    <li>公司资源</li>
    <li>个人资源</li>
    <li>电话资源</li>
    </ul>
    </div>
    </div>
    </div>
    </td>
    </tr>
    </table>

    具体的 demo 后期更新 。。。。。。

    author:Lik
    Endeavoring to powerless, struggling to move yourself.
  • 相关阅读:
    foxmail邮箱在代理环境下不能使用解决方法。
    Win7下IE8无法打开https类型的网站解决方法笔记
    重新注册IE组件
    Web开发者的六个代码调试平台
    仿Material UI框架的动画特效
    JS几种数组遍历方式以及性能分析对比
    js 函数提升和变量提升
    彻底掌握this,call,apply
    深入理解requestAnimationFrame
    基于iscroll.js实现下拉刷新和上拉加载特效
  • 原文地址:https://www.cnblogs.com/likwin/p/7089113.html
Copyright © 2011-2022 走看看