Html div中的响应ULs填充空间

好的，我背上了另一个用户JSFIDLE，很抱歉丢失了用户名：-/

现在，我已经创建了我想要的东西，那就是灵活的无序列表，它们是响应性的。以前是div，但这是多个ul

在这里，这些列表基本上会填满整个页面

但我想问一件小事。我知道我可以使用提供的截止点来保持不同大小的良好样式，但如果我已将uls固定到设置的空间，那么为什么在缩小最后一个列表所在的视口时可以找到一个点

在我们达到css中定义的小尺寸之前，uls不应该变得越来越瘦吗？难道这不可能发生吗

如有任何建议，将不胜感激。再说一次，我知道我可以也将提出一些媒体问题来避免这种情况，但这怎么可能发生呢

代码如下：

<div class="outer">
    <ul class="inner1">
    <li>Hello World I wonder what they will think</li>
    <li>World</li>
    <li>!</li>
    </ul>
        <ul class="inner2">
    <li>Hello</li>
    <li>World</li>
    <li>!</li>
    </ul>
        <ul class="inner3">
    <li>Hello</li>
    <li>World</li>
    <li>!</li>
    </ul>
</div>

body {
    margin:0;
    border: none;
}
ul,li { padding:2px; list-style:none; }

.outer {
    width: 100%;
}

.outer li {   white-space: nowrap;
  overflow: hidden;
    text-overflow: ellipsis;}

.inner1 {
    clear: both;
    float: left;
    margin-left:7%;
    display:inline-block;
    width: 30%;
}
.inner2 {
    display:inline-block;
    width: 30%;

}
.inner3 {
    display:inline-block;
    width: 30%;
}
 @media only screen and (max-width: 420px) {

    .inner1, .inner2, .inner3 {
        display:block;
        width:100%;
        margin-left:0;

    }
}

---

当您使用包含内联块元素的内联元素时，您可以这样编写它们：

<ul>
   <li>...</li>
   <li>...</li>
</ul>
<ul>
   <li>...</li>
   <li>...</li>
</ul>

<ul><li>....</li><li>....</li></ul><ul><li>....</li><li>....</li></ul>

2.好办法

将字体大小：0添加到ul-s的父级，并向ul-s添加一些不为零的字体大小

这样，空间将不再占用空间，因为它们的字体大小为：0，但我们也必须向ul-s添加一些字体大小，因为它们也将消失，我们只希望删除空间

.outer {
    font-size: 0;
}
ul { font-size: 14px; }

---

有其他方法可以使用负magin，但2是最干净的方法。

好的，酷！这将有助于我完成这一页的最后润色。谢谢