开发者社区> 问答> 正文

关于ul对齐问题

a123456678 2016-03-25 15:32:53 817

我尝试用ul,li来实现table,后来想着如何让table水平置中;结果出了点问题;没思路,求指导,是不是css加了不该加的?提前感谢下回答的童鞋。
不过我主要是弄懂,为什么会出现排版不齐的问题?

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



</body>
</html>

screenshot

前端开发
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:14:30
    #table_div {
      width: 指定宽度
      margin: 0 auto;
    }

    你这个css 写得太乱了,好好整整,给你推荐个前端代码规范吧: 编码规范 by @mdo

    帮你找了下错误的原因,我分析是因为当你在外层 div 中加入 text-align : center 或者 right 样式后,若此时 div 内的子元素未进行缩进,chrome 解析 css 时将会产生错误,而 firefox 则不受影响,所以这应该是一个浏览器兼容性的问题。你试着把 ul 与 div 缩进写好,如下:

    <div id="table_div">
      <ul class="ul_row">

    此时,在 chrome 下不会再出现排版不齐了。虽然看上去是个浏览器兼容性问题,但是根本原因在于你的代码写的不够规范。

    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程