Question

好的，我捎带了另一个用户jsfiddle，抱歉丢失了用户名： - /

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

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

但我想问一件小事。我知道我可以使用提供的截止点来保持不同大小的漂亮风格，但是如果我将uls固定到一个固定空间，那么为什么我会缩小最后一个列表下降的视口？

在我们达到css中定义的小尺寸之前，不应该让皮肤更瘦，更瘦吗？难道不可能发生这种情况吗？

任何建议都将不胜感激。再一次，我知道我可以并且会做几个媒体查询以避免这种情况，但它怎么会发生呢？

以下是代码：

<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

当您使用内联元素（包括内联块元素）时，如下所示：

<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） GOOD 方式

您将font-size: 0添加到ul的父级，并将font-size添加到非{0}的ul。

这样，空格不再占用空格，因为它们有font-size: 0，但我们必须添加一些字体大小ul - s，因为它们也会消失，我们想删除只有空格。

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

Demo

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

div中的响应式UL用于填补空间

1 个答案: