Question

我需要在一行中显示近16个输入框并以模态打开它而不会获得水平滚动条。有没有办法有效地设计这个？我得到一个滚动条，因为它太大了。用户将使用条形码扫描仪和扫描项目，所有16个输入框的长度= 12（必要）使得模态得到用户不想要的滚动条。有什么建议？使用HTML5，jquery，css

<table id="setOpProd">
            <tr class="centerAlign">
                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td>
            </tr>
            <tr>
                <td><input class="ui-state-disabled" type="text" size="12" maxlength="12" /></td>
                <td><input class="ui-state-disabled" type="text" size="12" maxlength="12" /></td>
                <td><input class="ui-state-disabled" type="text" size="12" maxlength="12" /></td>
                <td><input class="ui-state-disabled" type="text" size="12" maxlength="12" /></td>
                <td><input class="ui-state-disabled" type="text" size="12" maxlength="12" /></td>
                <td><input class="ui-state-disabled" type="text" size="12" maxlength="12" /></td>
                <td><input class="ui-state-disabled" type="text" size="12" maxlength="12" /></td>
                <td><input class="ui-state-disabled" type="text" size="12" maxlength="12" /></td>
                <td><input class="active" type="text" size="12" maxlength="12" /></td>
                <td><input type="text" size="12" maxlength="12" /></td>
                <td><input type="text" size="12" maxlength="12" /></td>
                <td><input type="text" size="12" maxlength="12" /></td>
                <td><input type="text" size="12" maxlength="12" /></td>
                <td><input type="text" size="12" maxlength="12" /></td>
                <td><input type="text" size="12" maxlength="12" /></td>
                <td><input type="text" size="12" maxlength="12" /></td>
            </tr>
</table>

Answer 1

真的不是让这项工作变得更好的黑白方式。一种选择是更改为包裹的网格

 1          2          3
_______    _______    _______
 4          5          6
_______    _______    _______
 7          8          9
_______    _______    _______
10          11         12
_______    _______    _______

或者，提供除滚动条之外的其他UI。也许是一个带有大箭头的区域，可以在悬停或点击时滚动。抛出一些键盘快捷键（Ctrl-Left，Ctrl-Right）。在某些情况下，它可能比滚动条更有用。这需要一些Javascript。

关于设计广泛网页的任何想法

1 个答案: