我正在尝试对一些预先存在的内容进行样式设置,但无法编辑 HTML。代码中有一个随机的“ ”导致 CSS 网格创建新行。当没有要定位的 html 或类时如何停止自动行?
td.product-name {
display: grid;
grid-template-columns: 60px 3fr;
grid-template-rows: auto;
grid-template-areas: " left righta " " left rightb " "left rightc";
grid-auto-flow: dense;
border: 1px solid;
}
td.product-name span {
border: 1px solid;
}
.product-image {
grid-area: left;
}
.product-name {
grid-area: righta;
}
.product-quantity {
grid-area: rightb;
}
.variation {
grid-area: rightc;
}
<table>
<tr class="cart_item">
<td class="product-name">
<span class="product-image"><img width="50" height="50" src="https://i.imgur.com/1o3KcN6.png"></span>
<span class="product-name">Product 1</span>
<- remove the row created by this nbsp;
<span class="product-quantity">QTY 1</span>
<span class="variation">var 1</span>
</td>
<td class="product-total">
<span class="amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>48</bdi>
</span>
</td>
</tr>
</table>
一种选择可能是使其成为显式行 (
grid-template-rows: 1fr 1fr 1fr 0;
) 并赋予其零高度:
td.product-name {
display: grid;
grid-template-columns: 60px 3fr;
grid-template-rows: 1fr 1fr 1fr 0;
grid-template-areas: " left righta " " left rightb " "left rightc";
grid-auto-flow: dense;
border: 1px solid;
}
td.product-name span {
border: 1px solid;
}
.product-image {
grid-area: left;
}
.product-name {
grid-area: righta;
}
.product-quantity {
grid-area: rightb;
}
.variation {
grid-area: rightc;
}
<table>
<tr class="cart_item">
<td class="product-name">
<span class="product-image"><img width="50" height="50" src="https://i.imgur.com/1o3KcN6.png"></span>
<span class="product-name">Product 1</span>
<span class="product-quantity">QTY 1</span>
<span class="variation">var 1</span>
</td>
<td class="product-total">
<span class="amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>48</bdi>
</span>
</td>
</tr>
</table>