html - div 中的响应式 UL 以填充空间

Question

好吧，我借用了另一个用户 jsfiddle，抱歉丢失了用户名 :-/

现在，我已经完全创建了我想要的东西，它是响应式的灵活无序列表。之前是div，这次是多个uls。

在这里，这些列表基本上会填满页面 http://jsfiddle.net/pMF2m/21/

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

在我们达到 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;

    }
}

Answer 1

当你像这样写内联元素(包括内联 block 元素)时:

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

每个新行都作为行内元素之间的空格添加。

意思是如果你有一个单词被空格分开也是一样的。

所以你有 word word word，这些空格没有被考虑并破坏了你的响应式设计。

那怎么办呢？

1) Tha BAD 方式:你可以这样写:

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

2) 好的方式

您将 font-size: 0 添加到 ul-s 的父级，并将一些 font-size 添加到 ul-s 不为零。

这样空格就不会占用空间了，因为它们有一个font-size: 0，但是我们也必须给 ul-s 添加一些 font-size因为它们也会消失，我们只想删除空格。

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

Demo

还有其他方法可以用负边幅实现，但 2) 是最干净的方法。