Question

我正在做一个小梦想项目。梦想是在线下棋。作为这个项目的第一部分，我希望有一个客户端棋盘小部件，首先可以访问盲人。我根本不擅长CSS，需要一些帮助。

我已经编写了javascript来生成3件事

带有行标签的无序列表（或者按国际象棋术语称为等级）。
我希望与排名标签列表相邻的单板。
列标签的无序列表（或者以国际象棋术语称为文件的文件）。我想把它水平排列在棋盘下面。

我已经设法使用javascript生成标记并让它显示在页面上。另外，我在电路板上附有键盘事件，允许我在电路板上导航，宣布一个正方形的等级标签和文件标签。

以下是在页面上呈现的内容：

<div id="main">
    <div class="boardWrapper">
        <div class="upperSection">
            <ul class="rankLabels leftLabelSpace" id="rank">
                <li id="rank_0">8</li>
                <li id="rank_1">7</li>
                <li id="rank_2">6</li>
                ...
                <li id="rank_7">1</li>
            </ul>
            <table role="grid" class="board rightBoardSpace" id="chessBoard">
                <!--8x8 gridcells here-->
            </table>
        </div>
        <div class="lowerSection">
            <div class="leftLabelSpace"><!--empty div--></div>
            <ul id="file" class="fileLabels rightBoardSpace">
                <li id="file_0">a</li>
                <li id="file_1">b</li>
                <li id="file_2">c</li>
                ...
                <li id="file_7">h</li>
            </ul>
        </div>
    </div>
</div>

这是我正在玩的CSS。不知何故，我无法按照此image of chess board。

#main {
    width: 100%;
    height: auto;
}
.boardWrapper {
    margin-left: auto;
    margin-right: auto;
    width: 560px;
    height: 560px;
    display: flex;
}
.upperSection {
    flex: 1;
    display: flex;
    width: 100%;
}
.lowerSection {
    clear: left;
    display: flex;
    width: 100%;
    height: 5em;
}
.leftLabelSpace {
    width: 5em;
    height: 100%;
}
.rankLabels {
    list-style-type: none;
}
.rankLabels li {
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    height: 12.5%;
}
.fileLabels {
    list-style-type: none;
    flex: 1;
}
.fileLabels li {
    float: left;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    width: 12.5%;
}
.board {
    table-layout: fixed;
    border: 1px solid black;
    border-collapse: collapse;
    border-spacing: 0px;
    height: 100%;
    width: 100%;
}

有人可以帮助我了解浮动和弹性工作的方式吗？我对CSS不好。如果有人感兴趣，他们可以在axchessible github repository上提供解决方案。

提前致谢！

Answer 1

您只能使用表格创建此内容。您不需要使用列表。

jsfiddle：https://jsfiddle.net/2dkjcoqp/

＆＃13;

#main {
  width: 100%;
  height: auto;
}

.boardWrapper {
  margin-left: auto;
  margin-right: auto;
  width: 560px;
  height: 560px;
}

.board {
  table-layout: fixed;
  border: none;
  border-collapse: collapse;
  border-spacing: 0px;
  height: 100%;
  width: 100%;
}

table.board tr td {
  border: 1px solid black;
}

table.board tr:nth-of-type(odd) td:nth-of-type(odd),
table.board tr:nth-of-type(even) td:nth-of-type(even) {
  background-color: white;
}
table.board tr:nth-of-type(even) td:nth-of-type(odd),
table.board tr:nth-of-type(odd) td:nth-of-type(even) {
  background-color: black;
}

＆＃13;

<div id="main">
  <div class="boardWrapper">
    <table role="grid" class="board" id="chessBoard">
      <tr>
        <th id="rank_0">8</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th id="rank_1">7</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th id="rank_2">6</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th id="rank_3">5</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th id="rank_4">4</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th id="rank_5">3</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th id="rank_6">2</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th id="rank_7">1</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th></th>
        <th id="file_0">a</th>
        <th id="file_1">b</th>
        <th id="file_2">c</th>
        <th id="file_3">d</th>
        <th id="file_4">e</th>
        <th id="file_5">f</th>
        <th id="file_6">g</th>
        <th id="file_7">h</th>
      </tr>
    </table>
  </div>
</div>

＆＃13;

面对display：flex的问题，我应该使用float而不是

1 个答案: