CSS 元素宽度逐步增加

Question

UPDATE: Please see image at the bottom of question.

所以我有一组输入和复选框，现在要求复选框和文本输入对齐；所以我想“步进”输入的大小。

复选框很好，宽度为 160 像素，在设备屏幕宽度上尽可能多地水平排列，但我需要一些方法来使文本框的大小也适合相同的大小，例如:

总体容器大小仅在文本框容器大小占其 76% 时才重要

Textbox container: 608px
Textbox Size: 480px (160 x 3)
Checkboxes in row: 3

Textbox container: 532px
Textbox Size: 480px (160 x 3)
Checkboxes in row: 3

Textbox container: 380px
Textbox Size: 320px (160 x 2)
Checkboxes in row: 2

Textbox container: 304px
Textbox Size: 160px (160 x 1)
Checkboxes in row: 1

要清楚如果容器宽度为 380px那么其中的文本框需要像行内 block 复选框一样工作，并且只能是 320px宽，因为下一步 将是 320+160 = 480px这将比容器更宽。

因此文本框的宽度以等于复选框宽度的“步长”增加(160px，但这将被硬编码，因为一旦设置它就不会改变)。

下面是我目前的代码；我真的不知道这个问题在哪里。是否有特定的短语可以搜索，特定的措辞来找出可能的解决方案。

还有；而 HTML 是表格格式；我不认为在这种情况下这应该太重要，因为它只是 <input> 的单个单元格容器。元素就像 div 等。

.catitem {
    width: 160px;
    display: inline-block;
    border:1px solid #090;
}
table {
    width: 100%
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
}
table tr:nth-of-type(2n+1) {
  background-color:#eaeaea;
}
 table tbody tr td:first-of-type {
    width: 24%;
    min-width: 55px;
    font-weight: bold;
    box-sizing: border-box;
    padding-left: 1rem;
    }
table tr td:nth-of-type(2) input[type="text"] {
  width:82%;            /* THIS bit needs changing */
  max-width:500px;      /*                         */
 }

<table>
                <tbody>
                <tr>
                    <td>Title:</td>
                    <td><input name="title" id="title" maxlength="12" placeholder="" type="text">
                    </td>
                </tr>
                <tr>
                    <td>First Name:</td>
                    <td><input name="fname" id="fname" maxlength="64" required="" type="text"></td>
                </tr>
                <tr>
                    <td>Surname:</td>
                    <td><input name="sname" id="sname" maxlength="64" required="" type="text"></td>
                </tr>
                <tr>
                    <td>Postcode:</td>
                    <td><input name="pcode" id="pcode" maxlength="10" required="" type="text"></td>
                </tr>
                <tr>
                    <td valign="top">Categories:</td>
                    <td>
    <label class="catitem">
        <input name="cats[]" value="chs" type="checkbox">
        Coach
    </label>
    <label class="catitem">
        <input name="cats[]" value="exm" type="checkbox">
        Ex-members
    </label>
    <label class="catitem">
        <input name="cats[]" value="fam" type="checkbox">
        Family Membership
    </label>
    <label class="catitem">
        <input name="cats[]" value="fos" type="checkbox">
        Friends
    </label>
    <label class="catitem">
        <input name="cats[]" value="ldy" type="checkbox">
        Ladies
    </label>
    <label class="catitem">
        <input name="cats[]" value="spr" type="checkbox">
        Sponsor
    </label>
              </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><input value="Add Member" type="submit"></td>
                </tr>
            </tbody>
            </table>

图片说明:

因此当容器宽度小于 2 步 (160 x 2) 时，将显示 1 步宽度；当容器元素小于 3 步宽 (160 x 3) 等时，将显示两步宽

上图中所有框的宽度应该是邮政编码框的宽度，当容器缩小时它们会缩小到标题输入框的宽度，但不会使用任何中间宽度。

Answer 1

要获得比媒体查询更动态的结果，您可以尝试使用 CSS calc() 构建它:https://www.w3schools.com/cssref/func_calc.asp

所以你会得到类似 width: (100% - 160px);对于每个容器，并为容器设置一个最大宽度，或者固定(如果您接受这些设置)或使用 Bootstrap 或类似工具根据页面中的列设置最大宽度。