1

我希望我的最后一个列表单元具有自动宽度以填充列表大小。但是当列表大小不够时，不希望列表单元太小或被吞没。

<listbox width="800px">
    <listhead>
        <listheader width="500px">header 1</listheader>
        <listheader width="500px">header 2</listheader>
        <listheader>header 3</listheader>
    </listhead>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
    </listitem>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
    </listitem>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
    </listitem>
</listbox>

希望有人帮忙！

4

3 回答 3

1

首先，

你想要的是不可能的。
原因很明显，如果您的屏幕尺寸是 1000 像素，您的浏览器必须在哪里占用第 3 列的空间？

当前 2 列需要为 500px 时，您唯一能做的就是将所有可用位置设置为第 3 列，使用vflex="max".

作为可选的事情，您可以做的是使列可以为用户调整大小。（sizable在listhead.

于 2015-11-15T06:10:17.093 回答
0

这对我有用

<listbox vflex="1" width="100%">
    <listhead>
        <listheader width="500px">header 1</listheader>
        <listheader width="500px">header 2</listheader>
        <listheader style="min-width: 120px;display: block;">header 3</listheader>
    </listhead>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell style="min-width: 120px;display: block;">item 1</listcell>
    </listitem>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell style="min-width: 120px;display: block;">item 1</listcell>
    </listitem>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell style="min-width: 120px;display: block;">item 1</listcell>
    </listitem>
</listbox>
于 2015-11-16T07:38:23.600 回答
0

在最后一个列表头中使用hflex="min"

根据本文档，

默认情况下，必须明确指定列的宽度，否则无论它们可能有什么内容，它都会在列之间平均分配。如果您想要最小宽度（适合内容），您可以在列（而不是列表框）处指定 hflex="min"。

<listbox width="800px">
    <listhead>
        <listheader width="500px">header 1</listheader>
        <listheader width="500px">header 2</listheader>
        <listheader hflex="min">header 3</listheader>
    </listhead>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
    </listitem>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
    </listitem>

    <listitem>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
        <listcell>item 1</listcell>
    </listitem>
</listbox>
于 2015-11-13T05:38:46.137 回答