Question

我有以下html和css结构。我遇到的问题是<li>项目从上到下排序，而不是从左到右排序。

我试图在其他类似的帖子上关注解决方案，但它对我的特定结构没有用。有什么想法吗？

#mylist {
  list-style: none;
  text-align: left;
  margin: 10px 0 2% 5%;
  column-count: 3;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  width: 100%;
}

#mylist li {
  border-bottom: 1px dashed #eaeaea;
  padding: 3px 0;
  margin: 5% 0.5% 0% 0.5%;
  display: inline-block;
  min-width: 80%;
  max-width: 80%;
}

<ul id="mylist">
  <li>
    <a id="floimg" href="/">
      <img width="180" height="180" src="img.jpg" class="attachment-mini-me size-mini-me wp-post-image"><span class="flotnm">My Label</span>
      <div class="emic">
        <div class="emif">
          <i id="flocut" class="x-icon x-icon-bookmark-o" data-x-icon="" aria-hidden="true"></i><span class="feme">Designer</span>
        </div>
        <div class="emis">
          <span class="flag"></span><span class="feme">French</span>
        </div>
      </div>
    </a>
  </li>
  <li>
    ...same structure
  </li>
</ul>

Answer 1

宽度为80％时，任何两个Person元素都不能在一行中....

Answer 2

我同意约翰内斯的观点。除此之外，

  min-width: 20%;
  max-width: 80%;

如果你希望它们的宽度会变化，那么它们是否适合同一条线，那么为什么不将最小宽度设为较小的数字呢？如果你希望它的邻居适合它，那么最多50％。

如果您希望每个min-height块彼此相邻显示，则将高度设置为相同的li。例如，您的代码在这里，但我更改了最小/最大宽度并简化了它。你可以看到这个问题不能很好地解决的问题：https://jsfiddle.net/yu2w14hp/2/（第二个li类型在图像下面。您可以通过修复设置最小高度/宽度或通常理解如何解决这个问题你想显示你的li区块。

列数从左到右排序为<ul>列表

2 个答案: