如何删除列表项下面的神秘空白

时间：2015-10-30 01:21:58

标签： html css css3 flexbox

我出现在缩进的最后一个元素的末尾。因为对图像指定的引用。我不知道如何解决它。

ul.ChatLog {
  list-style: none;
}

.ChatLog {
  height: 60px;
  overflow: auto;
}

.ChatLog__entry {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  max-width: 100%;
  margin: 0;
  margin-bottom: 5px;
}

.ChatLog__entry:last-child {
  margin-bottom: 0;
}

.ChatLog__avatar {
  flex-shrink: 0;
  flex-grow: 0;
  z-index: 1;
  height: 29px;
  width: 29px;
  border-radius: 3px;
}

.ChatLog__message {
  flex: 1;
  position: relative;

  margin: 0 0 0 12px;
  background-color: #000;
  padding: 7px;
  color: #fff;
  font-size: 12px;
}

.ChatLog__message:before {
    position: absolute;
    right: auto;
    top: .6em;
    left: -12px;
    height: 0;
    content: '';
    border: 6px solid transparent;
    border-right-color: #ddd;
    z-index: 2;
   
  }
            <ul class="ChatLog">
                <li class="ChatLog__entry">
                    <div class="ChatLog__avatar"><a class="" href=""><img src="//placekitten.com/g/29/29" /></a></div>
                    <p class="ChatLog__message">
                        Hello!
                        <time class="ChatLog__timestamp">6 minutes ago</time>
                    </p>
                </li>
                <li class="ChatLog__entry">
                    <div class="ChatLog__avatar"><a class="" href=""><img src="//placekitten.com/g/29/29" /></a></div>
                    <p class="ChatLog__message">
                        What is going on here?
                        <time class="ChatLog__timestamp">5 minutes ago</time>
                    </p>
                </li>
                <li class="ChatLog__entry">
                    <div class="ChatLog__avatar"><a class="" href=""><img src="//placekitten.com/g/29/29" /></a></div>
                    <p class="ChatLog__message">
                        I
                        <time class="ChatLog__timestamp">3 minutes ago</time>
                    </p>
                </li>
            </ul>

我做了一个截图来说明。 link

我会非常感谢任何提示，谢谢！

2 个答案:

答案 0 :(得分：1)

li底部的空格实际上存在于所有列表项（.ChatLog__entry）中。它只能在最后一个上显而易见，因为下方没有列表项来隐藏空间。

空间来自div.ChatLog__avatar。它有一个height: 29px。这略高于其兄弟p.ChatLog__message，即身高28px。

进行此调整：

.ChatLog__avatar {
  flex-shrink: 0;
  flex-grow: 0;
  z-index: 1;
  height: 28px; /* not 29px */
  width: 28px; /* not 29px */
  border-radius: 3px;
}

答案 1 :(得分：0)

此代码按预期工作，检查注释以获得解释。我添加了一些额外的条目以查看更多滚动...

Flexbox有一些我无法直接解释的怪癖，其中一个与计算最小/最大高度/宽度时的舍入数字有关。不知道是什么导致了什么，但是通过将所有'__entry放在flexbox容器中来解决问题。

我还删除了一些冗余的flexbox规则，因为您最需要默认的弹性行为。

/* { outline: 1px dashed red } /* use for debugging */

ul.ChatLog,
li.Chatlog__entry {
  list-style: none; padding: 0; margin: 0; 
}

.ChatLog {
  display: flex;    /* Create main flex container */
  flex-direction: column; /* as column of multiple rows */
  max-height: 60px; /* maximum bounds for container */
  overflow: auto;
}

.ChatLog__entry {   /* removed redundant flex defs, defaults work*/
  display: flex;    /* as container for avatar and message */
  min-width: 100%;  /* makes parent grow to full width */

  flex: 1;          /* as child of Chatlog, fill full row */
  margin-bottom: 5px; /* as you wanted => */
}

time    { padding-left: 10px } /* create a bit of distance...*/

.ChatLog__entry:last-child {
  margin-bottom: 0; /* => but not on the last */
}

.ChatLog__avatar > * { /* removed redundant flex defs, defaults work*/
  z-index: 1;
  height: 29px;
  width: 29px;
  border-radius: 3px;
}

.ChatLog__message {
  flex: 1;
  position: relative;

  margin: 0 0 0 12px;
  background-color: #000;
  padding: 7px;
  color: #fff;
  font-size: 12px;
}

.ChatLog__message:before {
    position: absolute;
    right: auto;
    top: .8em; /* added .2em to center arrow */
    left: -12px;
    height: 0;
    content: '';
    border: 6px solid transparent;
    border-right-color: #ddd;
    z-index: 2;
}    
    <ul class="ChatLog">

        <li class="ChatLog__entry">
            <div class="ChatLog__avatar">
                <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a>
            </div>
            <p class="ChatLog__message">
                Hello!
                <time class="ChatLog__timestamp">6 minutes ago</time>
            </p>
        </li>

        <li class="ChatLog__entry">
            <div class="ChatLog__avatar">
                <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a>
            </div>
            <p class="ChatLog__message">
                What is going on here?
                <time class="ChatLog__timestamp">5 minutes ago</time>
            </p>
        </li>

        <li class="ChatLog__entry">
            <div class="ChatLog__avatar">
                <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a>
            </div>
            <p class="ChatLog__message">
                I
                <time class="ChatLog__timestamp">3 minutes ago</time>
            </p>
        </li>

        <li class="ChatLog__entry">
            <div class="ChatLog__avatar">
                <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a>
            </div>
            <p class="ChatLog__message">
                Hello!
                <time class="ChatLog__timestamp">6 minutes ago</time>
            </p>
        </li>

        <li class="ChatLog__entry">
            <div class="ChatLog__avatar">
                <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a>
            </div>
            <p class="ChatLog__message">
                What is going on here?
                <time class="ChatLog__timestamp">5 minutes ago</time>
            </p>
        </li>

        <li class="ChatLog__entry">
            <div class="ChatLog__avatar">
                <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a>
            </div>
            <p class="ChatLog__message">
                I
                <time class="ChatLog__timestamp">3 minutes ago</time>
            </p>
        </li>
        <li class="ChatLog__entry">
            <div class="ChatLog__avatar">
                <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a>
            </div>
            <p class="ChatLog__message">
                Hello!
                <time class="ChatLog__timestamp">6 minutes ago</time>
            </p>
        </li>

        <li class="ChatLog__entry">
            <div class="ChatLog__avatar">
                <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a>
            </div>
            <p class="ChatLog__message">
                What is going on here?
                <time class="ChatLog__timestamp">5 minutes ago</time>
            </p>
        </li>

        <li class="ChatLog__entry">
            <div class="ChatLog__avatar">
                <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a>
            </div>
            <p class="ChatLog__message">
                I
                <time class="ChatLog__timestamp">3 minutes ago</time>
            </p>
        </li>
        <li class="ChatLog__entry">
            <div class="ChatLog__avatar">
                <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a>
            </div>
            <p class="ChatLog__message">
                Hello!
                <time class="ChatLog__timestamp">6 minutes ago</time>
            </p>
        </li>

        <li class="ChatLog__entry">
            <div class="ChatLog__avatar">
                <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a>
            </div>
            <p class="ChatLog__message">
                What is going on here?
                <time class="ChatLog__timestamp">5 minutes ago</time>
            </p>
        </li>

        <li class="ChatLog__entry">
            <div class="ChatLog__avatar">
                <a class="" href=""><img src="http://placekitten.com/g/29/29" /></a>
            </div>
            <p class="ChatLog__message">
                I
                <time class="ChatLog__timestamp">3 minutes ago</time>
            </p>
        </li>
    </ul>

相关问题
最新问题