-1

我正在尝试编写一个 NCAA 括号提交应用程序，但我无法弄清楚如何将 HTML 元素排列成这样的括号形状。我想使用 Bootstrap 来保持 UI 看起来干净，但我并不依赖它。有什么建议吗？

4

1 回答 1

1

在这里可以找到使用 div 的很棒的 HTML/CSS 括号示例。或者，可以在此处找到使用无序列表的两侧 HTML/CSS 括号的一个很好的示例。查看源代码并找出最适合您的方法。

我认为更好的方法是为每个单元格使用table带有特定 CSS的 HTML。border我在下面创建了一个粗略的示例。但是您可能想自己尝试一下，查看链接，看看什么最适合您的应用程序。祝你好运！

HTML：

<table>
    <tr>
        <td><p>1. Team Name</p></td>
        <td rowspan="2"><p>Team Name</p></td>
        <td rowspan="4"><p>Team Name</p></td>
    </tr>
    <tr>
        <td style="border-right:1px solid black"><p>4. Team Name</p></td>
    </tr>
    <tr>
        <td ><p>2. Team Name</p></td>
        <td rowspan="2"><p>Team Name</p></td>
    </tr>
    <tr>
        <td style="border-right:1px solid black"><p>3. Team Name</p></td>
    </tr>
</table>

CSS：

table {
  border-collapse: collapse;
  border: none;
}

td {
  vertical-align: middle;
  width: 10em;
  margin: 0;
  padding: 0;
}

td p {
  border-bottom: solid 1px black;
  margin: 0;
  padding: 5px 5px 2px 5px;
}

JS 小提琴示例

于 2013-02-18T00:25:48.067 回答