css 如何在垂直堆叠按钮/列表项中水平对齐文本,这些按钮/列表项可能有2-3行

uqxowvwt  于 2023-06-25  发布在  其他
关注(0)|答案(2)|浏览(129)

我试图创建一个布局,基本上是一个表格/CSS网格,自动对齐跨多行水平文本。行/列表项应该是可点击的,可以通过tabindex进行制表,并且有一些边框和交替的背景。

虽然在本例中列中的文本是相同的,但实际应用程序中并不存在。可能有一个较长的数字在第一列,一个较短的第二列,一个较长的第三列,甚至一些文本,所以我需要布局自动对齐这些列宽。红线仅用于说明。
只要列表项中只有一行内容,这就没有问题,但是当我有多行内容时,我该如何解决这个问题呢?如果这是一个表格布局,我需要的将是将两个<tr>组合在一起,tabindex/focus,onclick和visuals。
我可以用一个display: contents;容器将它们分组,并仍然通过.contents-selector > *根据背景和边框来设置它们的样式,我猜,但我不能在.contents-selector类上使其可制表或可点击。
也许有一个完全不同的方法来解决这个问题,我没有考虑。当然,我可以用一些简单的东西来实现我的布局,比如使用表格来布局,在较长的文本上使用position: absolute;,在另一个列上使用<br>等等。虽然我不知道我得到了多少行,我需要多少个<br>,但这不是解决这个问题的正确方法。

**编辑:**解决方案是tbody的用法:https://stackoverflow.com/a/76546055/1900980

5f0d552i

5f0d552i1#

解决方案是每“行”使用一个tbody,它可以包括两个trtbody可以与tabindex和onclick一起使用,并且可以通过nth-childfirst-childlast-child等选择器进行样式化。

ijxebb2r

ijxebb2r2#

您可以使用一个简单的html table来实现此功能,并使用put each row or row-groups inside a tbody . you can now use the tbody to style or set onclick listeners or tab索引`

table,
tr,
td
{
    border: 1px solid gray;
}

table tbody:nth-child(even)
{
    background-color: aqua;
}
<table>
    <tbody>
        <tr>
            <td>Lorem.</td>
            <td>Qui?</td>
            <td>Consequatur!</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td>Lorem, ipsum.</td>
            <td>Neque, enimssssssssssssss.</td>
            <td>Aut, vitae!</td>
        </tr>
        <tr>
            <td>Lorem, ipsum.</td>
            <td>Neque, enim.</td>
            <td>Aut, vitae!</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>Lorem.</td>
            <td>Qui?</td>
            <td>Consequatur!</td>
        </tr>
    </tbody>
</table>

相关问题