Question

当我尝试添加justify-self和align-self规则时，它会将项目垂直和水平居中，但问题是当我这样做时，边框环绕文本而不是一直扩展到边缘。

我希望每个单元格周围都有1px边框，因此如果它们与另一个单元格相邻，它们不会加倍。

div.around {
    width: 490px;
    margin: 0 auto;
}

div.padder {
    padding: 125px 24px 30px;
}

div.size-chart {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    border: 1px solid #c4c4c4;
}

.size-chart div {
    border: 1px solid #c4c4c4;
}

.double-span-col {
    grid-column: auto / span 2;
}

.double-span-row {
    grid-row: auto / span 2;
}

.size-chart div span {
    font-weight: bold;
}

.theader {
    background: #e2e2e2;
}


  <div class="around">
    <div class="padder">
        <h2>Size Guide</h2>
        <div class="size-chart">
            <div class="double-span-col theader">
                <span>US</span>
            </div>
            <div class="theader">
                <span>UK</span>
            </div>
            <div class="theader">
                <span>FRANCE</span>
            </div>
            <div class="theader">
                <span>ITALY</span>
            </div>
            <div class="theader">
                <span>JAPAN</span>
            </div>
            <div class="theader">
                <span>BUST <i>(IN)</i></span>
            </div>
            <div class="theader">
                <span>WAIST <i>(IN)</i></span>
            </div>
            <div class="theader">
                <span>HIP <i>(IN)</i></span>
            </div>


            <div>XXS</div>
            <div>00</div>
            <div>2</div>
            <div>32</div>
            <div>34</div>
            <div>N/A</div>
            <div>30.5</div>
            <div>25.5</div>
            <div>34.5</div>

            <div class="double-span-row">XS</div>
            <div>0</div>
            <div>4</div>
            <div>34</div>
            <div>36</div>
            <div>5</div>
            <div>31.5</div>
            <div>25.5</div>
            <div>35.5</div>

            <div>2</div>
            <div>6</div>
            <div>36</div>
            <div>38</div>
            <div>7</div>
            <div>32.5</div>
            <div>26.5</div>
            <div>36.5</div>

            <div class="double-span-row">S</div>
            <div>4</div>
            <div>8</div>
            <div>38</div>
            <div>40</div>
            <div>9</div>
            <div>33.5</div>
            <div>27.5</div>
            <div>37.5</div>


            <div>6</div>
            <div>10</div>
            <div>40</div>
            <div>42</div>
            <div>11</div>
            <div>34.5</div>
            <div>28.5</div>
            <div>38.5</div>

            <div class="double-span-row">M</div>
            <div>8</div>
            <div>12</div>
            <div>42</div>
            <div>44</div>
            <div>13</div>
            <div>35.5</div>
            <div>29.5</div>
            <div>39.5</div>

            <div>10</div>
            <div>14</div>
            <div>44</div>
            <div>46</div>
            <div>15</div>
            <div>36.5</div>
            <div>30.5</div>
            <div>40.5</div>

            <div>L</div>
            <div>12</div>
            <div>16</div>
            <div>46</div>
            <div>48</div>
            <div>17</div>
            <div>37.5</div>
            <div>31.5</div>
            <div>41.5</div>

        </div>
    </div>
</div>

Answer 1

您是否尝试使用HTML <table>？像：

<table style="width:100%">
  <tr>
    <th></th>
    <th></th> 
    <th></th>
 </tr>
 <tr>
   <th></th>
   <th></th> 
   <th></th>
</tr>

如何在不丢失边框的情况下对齐网格行和网格列内的文本？

1 个答案: