Question

在我的特定例子中，我试图选择棋类游戏的动作。我的输出应该是这样的：

e2 - e4 e7 - e5
♘g1 - f3 d7 - d6
♗f1 - c4♝c8 - g4

等。

每行会有4个项目：白色部分（如果它是一个棋子则为空），为白色棋子移动，黑色棋子，为黑色棋子移动

我希望4个项目彼此垂直对齐。

我的CSS使用有序列表（ol）。为了对齐每行上的四个项目，我尝试了以下内容：

1）span：项目1到4左侧位置的第n个孩子。这很好。

ol.chessgame li span { position: absolute ; }
ol.chessgame li span:nth-child(1) {left: 60px;} ...
<ol class="chessgame">
<li><span></span><span>e2 – e4</span><span></span><span>e7 – e5</span></li>

2）显示：每个项目的宽度为flex。这显示正确，除了（ol）产生的行号不会出现。

ol.jeu { max-width: 300px ; }
.movement { display: flex ; }
.movement span:nth-child(1) { width: 10% ; } ...
<ol class="jeu">
<li class="movement"><span></span><span>e2 – e4</span><span></span><span>e7 – e5</span></li>

我的问题：在显示案例2的情况下我做错了什么：flex？

（另一个问题可能是 - 有更好的方法吗？）

示例代码。第一个列表显示了我希望它的样子。第二个列表缺少列表项目编号。

http://jsbin.com/lomofivoka/edit?html,css,js,output

Answer 1

在您没有使用图标的位置添加 ，并将position: relative和display: block添加到跨度。

以下是更新后的代码： -

Code - https://jsbin.com/meculimowo/1/edit?html,output

Answer 2

作为一名UI / UX工程师，我对表的实际需求感到畏缩，但事实是，无论何时需要表格形式，表格都有意义。它变得更容易，唯一的缺点是响应能力，但考虑到这是一个小桌子，你会没事的。

我建议不要过度思考这个并且去“轻松做到”。但是，我在我的演示中也为您提供了ol选项。您可以选择哪种方式更适合您。

但这是表一：

HTML：

<table>
    <tr>
        <td>1</td>
        <td></td>
        <td>e2 – e4</td>
        <td></td>
        <td>e7 – e5</td>
    </tr>
    <tr>
        <td>2</td>
        <td>♘</td>
        <td>g1 – f3</td>
        <td></td>
        <td>d7 – d6</td>
    </tr>
    <tr>
        <td>3</td>
        <td>♗</td>
        <td>f1 – c4</td>
        <td>♝</td>
        <td>c8 – g4</td>
    </tr>
    <tr>
        <td>
            ...
        </td>
    </tr>
    <tr>
        <td>7</td>
        <td>♗</td>
        <td>f1 – c4</td>
        <td>♝</td>
        <td>c8 – g4</td>
    </tr>
</table>

CSS：

table td:nth-child(odd){
    width:20%;
}
table td:first-child{
    width:5%;
}
table td:nth-child(even){
    width:10%;
    text-align:right;
    padding-right:5px;
}

查看demo

Answer 3

我不完全确定它们应该是什么顺序，所以让我知道，我可以相应调整。此演示的主要目的是展示flexbox和counter如何使组织多列布局稳定且易于管理。

以下是更改列表：

每个span都会转换为div
每个＆＃34;单元格＆＃34; 的第一个div合并到第二个div
每个＆＃34;列＆＃34; 都包含在section
每对sections都包含在div
将body设为flex-column†
制作div#chessgame和div#jeu flex-rows‡
将每个section设为flex-column
为每个counter

div

†包括：

display: flex;
flex-flow: column nowrap;

‡包括：

display: flex;
flex-flow: row nowrap;

JS Bin

<强>段

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    body {
      counter-reset: cnt;
      display: flex;
      flex-flow: column nowrap;
      position: relative;
    }
    .chessgame,
    .jeu {
      display: flex;
      flex-flow: row nowrap;
    }
    section {
      display: flex;
      flex-flow: column nowrap;
      margin: 20px;
      width: 8em;
    }
    section div {
      counter-increment: cnt;
      height: 30px;
    }
    section div:before {
      content: counter(cnt)". ";
    }
    .space {
      margin-left: 1ex;
    }
  </style>

</head>

<body>

  <div class="chessgame">
    <section>
      <div>e2 – e4</div>
      <div>♘ g1 – f3</div>
      <div>♗ f1 – c4</div>
      <div>♘ b1 – c3</div>
      <div>♘ f3 x e5</div>
      <div>♗ c4 x f7</div>
      <div>♘ c3 – d5#</div>
    </section>

    <section>
      <div class="space">e7 – e5</div>
      <div class="space">d7 – d6</div>
      <div>♝ c8 – g4</div>
      <div>g7 – g6</div>
      <div>♝ g4 x d1</div>
      <div>♚ e8 – e7</div>
    </section>
  </div>

  <div class="jeu">
    <section>
      <div class="movement">e2 – e4</div>
      <div class="movement">♘ g1 – f3</div>
      <div class="movement">♗ f1 – c4</div>
      <div class="movement">♘ b1 – c3</div>
      <div class="movement">♘ f3 x e5</div>
      <div class="movement">♗ c4 x f7</div>
      <div class="movement">♘ c3 – d5#</div>
    </section>

    <section>
      <div>e7 – e5</div>
      <div>d7 – d6</div>
      <div>♝ c8 – g4</div>
      <div>g7 – g6</div>
      <div>♝ g4 x d1</div>
      <div>♚ e8 – e7</div>
    </section>
  </div>

</body>

</html>

＆＃13;

CSS - 将文本部分定位在有序列表<ol>的各个行项目<li>中

3 个答案: