對陣圖在比賽中常用于展示雙方隊伍的陣容、位置以及比分等信息，它可以幫助觀眾更清晰地了解比賽的進程和結果。而使用CSS來創(chuàng)建對陣圖可以讓它更加美觀、易讀、易維護。

首先，我們可以使用pre標簽來排版對陣圖，這樣可以更好地控制文字的間距和對齊方式：

Team A   VS   Team B
Position           |   Player         |   Player         |   Player         
Top Lane            |   Player A       |   Player B       |   Player C
Jungle              |   Player D       |   Player E       |   Player F
Middle Lane         |   Player G       |   Player H       |   Player I
ADC                 |   Player J       |   Player K       |   Player L
Support             |   Player M       |   Player N       |   Player O
Score
Team A: 10        Team B: 8

接下來，我們可以利用CSS的定位屬性來調整對陣圖的布局：

.team {
position: relative;
width: 600px;
margin: 50px auto;
font-size: 16px;
}
.title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.score {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 20px;
font-weight: bold;
}
.line {
position: absolute;
width: 100%;
border-top: 1px solid #000;
top: 45%;
}
.team .position {
width: 33%;
text-align: center;
display: inline-block;
}
.team .player {
width: 33%;
text-align: center;
display: inline-block;
vertical-align: middle;
}

最終的效果如下：

通過使用CSS的相關技巧，我們可以讓對陣圖更加美觀、易讀，并且方便進行維護和修改。