Question

我试图获得具有不同颜色内部元素的ul，以同样伸展100％。它没问题，直到我在1280px下测试。我必须尽量减少窗口仍然看到它，也间歇性地抓住它。一切都加起来。我真的不知道这里有什么不对。任何帮助将非常感激。谢谢。

<div id="colour-bar">
<ul>
 <li class="orange"></li>
 <li class="spacer"></li>
 <li class="red"></li>
 <li class="spacer"></li>
 <li class="pink"></li>
 <li class="spacer"></li>
 <li class="purple"></li>
 <li class="spacer"></li>
 <li class="blue"></li>
 <li class="spacer"></li>
 <li class="green"></li>
 <li class="spacer"></li>
 <li class="yellow"></li>
</ul>
</div>

.orange {
    background-color:#f37028;
}

.red {
    background-color:#ed1b24;
}

.pink {
    background-color:#e54198;
}

.purple {
    background-color:#6b439c;
}

.blue {
    background-color:#0193cf;
}

.green {
    background-color:#91ff01;
}

.yellow {
    background-color:#fff300;
}

#colour-bar {
    top:0;
    left:0;
    width:100%;
    position:fixed;
    height:10px;
    background-color:#FFFFFF;
}

#colour-bar ul {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}

#colour-bar ul li {
    width:14.24%;
    height:100%;
    float:left;
    list-style:none;
}

#colour-bar ul li.spacer {  
   width:0.05333%;
   height:100%;
   display:block;
   float:left;
}

Answer 1

问题可能是由于每个浏览器在某些视口宽度引入的一些舍入不准确性而发生，因此有时项目之间的空间消失。

此外，您的spacer元素的宽度为可用宽度的0.0533%，因此这意味着当容器宽度至少为1px时，空间正好为1876px：这个宽度是浏览器如何舍入值

的选择

试试此代码：http://codepen.io/anon/pen/ioxtE

我首先建议删除所有spacer元素（因为它是空标记，仅用于样式目的，因此是一种不好的做法）

<div id="colour-bar">
 <ul>
   <li class="orange"></li>
   <li class="red"></li>
   <li class="pink"></li>
   <li class="purple"></li>
   <li class="blue"></li>
   <li class="green"></li>
   <li class="yellow"></li>
 </ul>
</div>

然后在列表项之间用

给出一个空格

#colour-bar li + li {
  border-left: 1px #fff solid;
}

并指定此样式

#colour-bar ul li {
   width:14.275%;   /*  ~(100/7)  */
   ...
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

并且颜色之间的空间总是在它的位置

Answer 2

尝试将其宽度设置为视口宽度，首先添加视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

然后为div提供视口宽度而不是百分比：

#colour-bar {
top:0;
left:0;
width:100vw;
position:fixed;
height:10px;
background-color:#FFFFFF;
}

希望这会有所帮助......

添加百分比以完全拉伸的麻烦

2 个答案: