ul-tag内部的li-tag内的div具有意外的拉伸/调整大小行为

时间：2013-08-07 20:37:22

标签： html css

我的笔：http://codepen.io/anon/pen/gtHpC

我用这支笔的目标是使用一些堆叠的div，文本垂直和水平居中。

当你看到灰色或红色/蓝色“堆叠”时，你会看到我达到了这个目标。但现在是怪癖。

当您在高度上调整窗口大小以使灰色和红色/蓝色堆叠在其高度上收缩时，有时会出现灰色和红色/蓝色堆叠之间的黑色（因为正文背景为黑色）。只有您调整大小的位置才能看到此差距。

请看这张图片：enter image description here

红色/蓝色堆叠周围的div高度为24.50％，我认为内部7个区域为100％，因此这个div内的7个“区域”中的每一个都具有 14.20％

我已经尝试过它，其值为100％/ 7 = 14.28571428571429％而不是14.20％，但这会使情况变得更好。

黑色差距依旧存在。

我对所有html元素都使用box-sizing:border-box;因此可用的24.50％除以7个区域，每个区域的高度为3.50％，包括边框或填充，因为我使用了最新的chrome。

所以我无法理解为什么在调整大小时会出现黑色差距？

HTML 

<div id="responseChart" style="height:100%;">
<div style="font-size:8px;;height:24.50%;">
  <ul class="Stack" style="height:100%;width:150px;float:left;"> 
    <li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">1</div></li>
    <li><div class="vertical-center horizontal-center" style="background:red;height:14.28571428571429%;border-bottom:white solid 1px;">2</div></li>
    <li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">3</div></li>
    <li><div class="vertical-center horizontal-center" style="background:red;height:14.28571428571429%;border-bottom:white solid 1px;">4</div></li>
    <li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">5</div></li>
    <li><div class="vertical-center horizontal-center" style="background:red;height:14.28571428571429%;border-bottom:white solid 1px;">6</div></li>
    <li><div class="vertical-center horizontal-center" style="background:blue;height:14.28571428571429%;border-bottom:white solid 1px;">7</div></li>
  </ul>
  <div class="dummy"></div>
  <div style="height:100%;width:100px;float:left;">
    <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
  </div>
  <div class="dummy"></div>
  <div style="height:100%;width:75px;float:left;">
    <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:green;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
    <div style="background:brown;height:14.28571428571429%;border-bottom:white solid 1px;"></div>
  </div>
  <div class="dummy"></div>
</div>
<div style="background:darkred;height:1%;"></div>
<div style="height:74.50%;">
<div style="height:100%;" id="chartBody">
      <ul class="Stack" style="width:150px;">
        <li><div class="vertical-center horizontal-center" style="height:25%;">test1</div></li> 
        <li><div class="vertical-center horizontal-center" style="height:50%;">test2</div></li>
        <li><div class="vertical-center horizontal-center" style="height:25%;">test3</div></li>        
      </ul>
  <div class="dummy"></div>
      <div style="height:100%;width:100px;">
        <div style="height:100%;" >
          <div class="push-center diagram" style="background-color:#aa11cc;height:25%;">1</div>
          <div class="push-center diagram" style="background-color:#aa44cc;height:50%;">2</div>
          <div class="push-center diagram" style="background-color:#aa66cc;height:25%;">3</div>
        </div>       
      </div>   
      <div class="dummy"></div>  
      <div style="height:100%;width:75px;">
        <div style="height:100%;">
          <div class="push-center missingReplies" style="background-color:#fff;height:22%;">-1</div>
          <div class="push-center diagram" style="background-color:#ff99cc;height:11%;">3</div>
          <div class="push-center diagram" style="background-color:#ff33cc;height:44%;">44</div>
          <div class="push-center diagram" style="background-color:#ff66cc;height:23%;">36</div>
        </div>        
      </div>  
    <div class="dummy"></div>  
    </div>
</div>
</div>

CSS 

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body, html{
    width:100%;
    height:100%;
padding:5px;  
  color:white;
  background:black;

}

*{ /* Every element which has a border or padding value puts this value inside the div */
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  padding:0;
  margin:0;
}

#chartBody{
  height:100%;
  background:darkgray;
}

.missingReplies{
  border-top: gray dashed 1px;
  border-left: gray dashed 1px;
  border-right: gray dashed 1px;  
}

.clear{
  clear:both;
}

.diagram
{
  color:white; 
  font-weight:bold;
  border-bottom:white solid 1px;
}

#chartBody > div  {
  height:100%;  
  float:left;
}
.dummy{
  float:left;
  background:grey;
  height:100%;
  width:30px;

}
.Stack {
    display: table;
    height: 100%;
    float: left;
}

    .Stack li {
        list-style: none;
        display: table-row;
    }

        .Stack li div {
            display: table-cell;
        }

.horizontal-center {
    text-align: center;
}

.vertical-center {
    vertical-align: middle;
}

1 个答案:

答案 0 :(得分：0)

当display:table-row;使用<li>而display:table;使用<ul>时，无需将高度设置为<li>，父标记的高度（在这种情况下<ul>）将在子标签之间划分（在这种情况下为<li>）。看看这个DEMO

有关详细信息，请参阅http://linuxandfriends.com/how-to-style-div-elements-as-tables/

相关问题
最新问题