-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 に答える