zoukankan      html  css  js  c++  java
  • div样式text-align在子元素缩进不规范的情况下,chrome出现的问题(貌似结果是inline-block导致的)

    在调css的时候,发现居然有firefox实现效果完整而chrome出现问题的情况;

    详细情况:segmentfault1 segmentfault2

    全文表达:

    <html><head>
    <meta charset="UTF-8">
    <title>Execl</title>
    <style type="text/css">
      ul{
      }
      .ul_row{
       display:inline-block;
       min-800px;
       margin:0 auto;
      }
      #table_div{
        100%;
        text-align:center;
      }
      .title{
       display:inline-block;
       min-800px;
        margin:0 auto;
      }
      li{
       list-style-type: none;
       float:left;
        height:30px;
        text-align:center;
        margin-left:1px;
        margin-bottom:1px;
        padding:0;
      }
    </style>
    </head>
    <body>
    
    
    <div id="table_div">
    <ul class="title">
        <li id="12301" style=" 200px; background-color: rgb(240, 128, 128);"><span>name</span></li>
        <li id="12302" style=" 200px; background-color: rgb(240, 128, 128);"><span>age</span></li>
        <li id="12303" style=" 300px; background-color: rgb(240, 128, 128);"><span>sex</span></li>
    </ul>
    <ul class="ul_row">
        <li id="12311" style=" 200px; background-color: rgb(238, 230, 133);"><span>wow</span></li>
        <li id="12312" style=" 200px; background-color: rgb(240, 248, 255);"><span>24</span></li>
        <li id="12313" style=" 300px; background-color: rgb(238, 233, 191);"><span>male</span></li>
    </ul>
    <ul class="ul_row">
        <li id="12311" style=" 200px; background-color: rgb(238, 230, 133);"><span>wow</span></li>
        <li id="12312" style=" 200px; background-color: rgb(240, 248, 255);"><span>24</span></li>
        <li id="12313" style=" 300px; background-color: rgb(238, 233, 191);"><span>male</span></li>
    </ul>
    </div>
    
    
    
    </body>
    </html>
    

      缩进不完全的情况下,chrome下的结果如下:但是通过拉伸缩小网页宽度又可以达到正常效果。

    正常效果如下:

    在给的链接网友给出的分析是,text-align,居然被div下的不正常缩进导致问题发生,而当缩进规范后,chrome展现就好了。

    由此,莫非chrome开始严格化代码的排版规范了?版本是34.0.

    不过这也不是坏事,只是挺难想到,自己不够细心啊!

    当网友提点之后,突然有想到之前看的关于前端经验总结的一个坑,关于默认的textNode问题。不过后面,也开始有人解答了,原来跟text-lign没关系。

    所以呢,inline-block用起来还是挺麻烦的,但是如果不做text-align和inline-block,怎么让浮动的ul置中呢?

    其实,把老父亲div设置定宽,再加上margin:0 auto;也不失为一个办法,只是总觉得100%是为了让表格大小更加灵活,但也许定宽也不一定就死板

  • 相关阅读:
    【0726 | Day 2】编程语言分类/主流编程语言介绍/网络的瓶颈效应
    【0725 | Day 1】计算机编程/计算机组成原理/计算机操作系统
    windows下vue-cli及webpack 构建网站(一)环境安装
    HBuilder 做移动端app流程
    vuejs 学习旅程之 vue-resource
    vuejs 学习旅程一
    身心合一
    td 内容自动换行 table表格td设置宽度后文字太多自动换行
    PhpStorm 2017汉化补丁 2017.1 免费中文版
    PHPStorm2017.1.3永久激活方法之本地破解激活
  • 原文地址:https://www.cnblogs.com/dont27/p/3661153.html
Copyright © 2011-2022 走看看