Question

我想使用// Converter public String isHigherGenerationYesNo(CPU cpu) { return toYesNo(isHigherGeneration(cpu)); }做2个或更多级别的高标签，但要使其从下到上增长。我有这个

<li>

div{
  width: 200px;
  border: 1px solid black;
}

ul{
  margin: 0px;
  padding: 0px;
}

li{
  margin: 2px;
  width: 20px;
  display: inline-block;
}

但我需要：

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

有没有没有js的方法吗？

Answer 1

如果您可以撤销li的订单，那么我可以使用wrap-reverse和row-reverse与display: flex的组合来使它正常工作。

ul {
  list-style: none;
  display: flex;
  width: 100px;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

li {
  margin-left: 2px;
  margin-right: 2px;
}

<html>
  <body>
    <ul>
      <li>10</li>
      <li>9</li>
      <li>8</li>
      <li>7</li>
      <li>6</li>
      <li>5</li>
      <li>4</li>
      <li>3</li>
      <li>2</li>
      <li>1</li>
    </ul>
  </body>
</html>

Answer 2

只需在第三个li元素之后插入广告中断线：

...
<li>3</li><br>
<li>4</li>
...

Answer 3

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li><br>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

我想你可以试试看。

Answer 4

div{
  width: 200px;
  border: 1px solid black;
}

ul{
  margin: 0px;
  padding: 0px;
}

li{
  margin: 2px;
  width: 20px;
  display: inline-block;
}

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <br/>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

只需休息一下

列表元素底部对齐

4 个答案: