Question

我想实现以下目标：

但是目前，我只得到这个：

说明（感谢Andrei Gheorghiu）：

我想以无限数量的内联列显示项目，规则是“一列中不超过2个项目”。第三项创建第二列，第五列创建第三列，第七列创建第4列，依此类推。每列或整个列表的行为都必须类似于内联块。

总结：

目标是在每列中有两个列表项。
整个列表必须位于段落的中间-无法插入新行之前或之后。
列表中的项目数未知。

这是我的代码： https://jsfiddle.net/2uf951km/6/

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-block;
  column-width: 35px;
  height: 35px;
  padding: 0;
  list-style: none;
  font-size: 10px;
  vertical-align: middle;
  /* 
    		Setting margin fixes the issue, 
    		but the with of the list is not
    		known.
    	*/
  /* margin-right: 170px; */
}

li {
  background: #9eff80;
  padding: 2px;
  opacity: 0.7;
}

<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

如何修改CSS / HTML，以使<ul>列表不会覆盖文本？

Answer 1

初始答案（在我意识到您要问的是什么之前）：

根据您想要<li>的订购方式，可以使用columns ...

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-block;
  column-width: 35px;
  padding: 0;
  list-style: none;
  font-size: 10px;
  columns: 2 0px;
}

li {
  background: #9eff80;
  margin: 1px;
  padding: 2px;
  opacity: 0.7;
  width: 100%;
  break-inside: avoid;
}

<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

...或display:inline-flex。您需要在子级上设置max-width，在父级上设置flex-wrap: wrap，并在父级上指定所需的vertical-align：

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-flex;
  padding: 0;
  list-style: none;
  font-size: 10px;
  flex-wrap: wrap;
  line-height: 5em;
  vertical-align: middle; 
     /* see also -webkit-baseline-middle
                 text-bottom
                 text-top */
}

li {
  line-height: 1em;
  flex: 0 1 auto;
  margin: 1px;
  width: calc(50% - 2px); /*deduct margin*/
  background: #9eff80;
  padding: 2px;
  opacity: 0.7;
  box-sizing: border-box;
}

<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

最重要的部分可能是从height: 35px;中删除ul。如果“列表中的项目数未知” ，为什么还要硬编码呢？

正确答案（如何实现）：

您似乎希望将元素显示为一系列不确定的嵌入式块，每个嵌入式块包含2个或更少的元素。您仍然必须定义当2个元素的内容超过所需的35px高度时应该怎么做。

在这里，您可以使用原始JavaScript来实现它。如有可能，您应该在服务器端执行此操作，

let uls = document.querySelectorAll('ul');
for(let i = 0; i < uls.length; i++) {
  let count = uls[i].children.length;
  if (count && count > 2) {
    for (j = 0; j < count/2; j++) {
      let parent = uls[i].parentElement,
          newUl = document.createElement('ul');
      for (k = 0; k < 2; k++) {
        li = uls[i].querySelector(':first-child');
        if (li) {
          newUl.appendChild(li);
          parent.insertBefore(newUl, uls[i]);
        }        
      }
    }
  }
}

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-block;
  padding: 0;
  list-style: none;
  font-size: 10px;
  vertical-align: middle;
  min-height: 35px;
}

li {
  background: #9eff80;
  padding: 2px;
  margin: 1px;
  opacity: 0.7;
}

<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
    <li>A list</li>
  </ul>
  in the middle of other text.   I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
    <li>A list</li>
  </ul>
  in the middle of other text.
</div>

这是jQuery会更短的情况之一：

$('ul').each(function() {
  while($('li', this).length > 2) {
    let newUl = $('<ul/>'), i = 0;
    while(i < 2) {
      $('li', this).eq(0).appendTo(newUl); 
      i++;
    }
    newUl.insertBefore($(this));
  }
})

Answer 2

更新了答案，以使用CSS网格inline-grid来生成内联级别的网格：

grid-template-rows设置为最多重复两行，每行各1fr。

grid-template-columns设置为重复auto必要的列数，宽度为35px。

grid-auto-flow设置为column，以使网格自动放置算法依次填充每一列，根据需要添加新列，同时仍保留最多两行。

grid-column-gap用于在列之间添加填充以显示与所提供图像相同的结果。

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(auto, 35px);
  grid-auto-flow: column;
  grid-column-gap: 10px;
  align-items: center;
  list-style: none;
  font-size: 10px;
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

li {
  background: #9eff80;
  padding: 2px;
  opacity: 0.7;
}

<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

希望这可以解决您的问题！

如提供的图像所示，如果您的目标是最多包含3个columns，则我认为您需要更改的属性是：

column-width: 35px到 columns: auto 3 ，如果您希望将每一列的column-width设置为auto。

或

column-width: 35px到 columns: 35px 3 ，如果您想为每个列指定特定的column-width。

这是columns属性的作用说明：

columns CSS属性可设置元素的列宽和列数。 -MDN - css columns

下面是我用来获得与您提供的图像相同的结果的代码。

div {
  font-size: 30px;
  padding: 30px;
}

ul {
  display: inline-block;
  columns: auto 3;
  padding: 0;
  list-style: none;
  font-size: 10px;
  vertical-align: middle;
}

li {
  background: #9eff80;
  padding: 2px;
  opacity: 0.7;
}

<div>
  I'd like to have a list with several columns
  <ul>
    <li>A list</li>
    <li>like this</li>
    <li>with unknown</li>
    <li>number and items</li>
    <li>or columns.</li>
  </ul>
  in the middle of other text.
</div>

希望这会有所帮助！

Answer 3

有几个修复程序，可以像这样将display: block添加到ul

 ul {
    display: block;
    column-width: 35px;
    height: 35px;

    padding: 0;
    list-style: none;
    font-size: 10px;

    vertical-align: middle;

    /* 
        Setting margin fixes the issue, 
        but the with of the list is not
        known.
    */
    /* margin-right: 170px; */
}

或者将margin-right更改为％或vw，而不是像这样的px

  ul {
    display: inline-block;
    column-width: 35px;
    height: 35px;

    padding: 0;
    list-style: none;
    font-size: 10px;

    vertical-align: middle;

    /* 
        Setting margin fixes the issue, 
        but the with of the list is not
        known.
    */
    margin-right: 30%;
}

Answer 4

如果您不介意将每个curl -v -H "Content-Type: application/x-www-form-urlencoded" --data "username=USERNAME&password=PASSWORD" https://******.de/login/index.php放在自己的列中，那么我认为这可能会起作用：

String loginData = "username=USERNAME&password=PASSWORD";
URL url = new URL(LOGIN_URL);
HttpsURLConnection connection = (HttpsURLConnection) url.openConnection();

connection.setRequestMethod("POST");
connection.addRequestProperty("Accept", "*/*");
connection.addRequestProperty("Host", "******.de");
connection.addRequestProperty("Content-Length", String.valueOf(loginData.length));
connection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
connection.setRequestProperty("User-Agent", "curl/7.55.1");

connection.setDoOutput(true);
OutputStream out = connection.getOutputStream();
out.write(loginData);
out.flush();
out.close();

connection.getInputStream().close();

System.out.println(connection.getHeaderField("Set-Cookie").split(";")[0]);

CSS列意外溢出

4 个答案: