将单列文本输入重新排列为多列 [英] Re-arranging a single column of text inputs into multiple columns

问题描述

我正在使用jTable进行我正在进行的项目，并想看看你们是否可以帮助解决我遇到的CSS问题。当我向jTable添加新记录时，我在弹出窗口的下面创建了一个jsfiddle。因为我有这么多行，它比可见屏幕更长。您是否认为通过一些CSS调整可以将其设为两个或三个列框？

I'm using jTable for a project I'm currently working on and want to see if you guys could help with the CSS issues I'm having. I've made a jsfiddle below of the form that popups when I add a new record to the jTable. Becuse I have so many rows it's longer than the visible screen. Do you think it would be possible with some CSS tweaks to make this a two or three column box?

http://jsfiddle.net/Euwsm/

我无法更改此表单的生成，因此它具有仅限CSS。

I can't change the generation of this form so it has to be CSS only.

表格的缩写版本如下：

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" style="position: absolute; height: auto; width: auto; top: 0px;" tabindex="-1" role="dialog" aria-describedby="ui-id-58" aria-labelledby="ui-id-59">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-59" class="ui-dialog-title">Add new record</span>
        <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>
        </button>
    </div>
    <div id="ui-id-58" style="width: auto; min-height: 0px; max-height: none; height: auto; display: block;" class="ui-dialog-content ui-widget-content">
        <form id="jtable-create-form" class="jtable-dialog-form jtable-create-form" action="/Demo/CreateStudent" method="POST">
            <div class="jtable-input-field-container">
                <div class="jtable-input-label">Institution Name</div>
                <div class="jtable-input jtable-text-input">
                    <input class="" id="Edit-[Institution Name]" type="text" name="[Institution Name]">
                </div>
            </div>
            <div class="jtable-input-field-container">
                <div class="jtable-input-label">RSE50 Name</div>
                <div class="jtable-input jtable-text-input">
                    <input class="" id="Edit-[Institution RSE50 Name]" type="text" name="[Institution RSE50 Name]">
                </div>
            </div>
            <div class="jtable-input-field-container">
                <div class="jtable-input-label">Legal Name</div>
                <div class="jtable-input jtable-text-input">
                    <input class="" id="Edit-[Interest Fax Institution]" type="text" name="[Interest Fax Institution]">
                </div>
            </div>
        </form>
    </div>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
        <div class="ui-dialog-buttonset">
            <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span>
            </button>
            <button type="button" id="AddRecordDialogSaveButton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Save</span>
            </button>
        </div>
    </div>
</div>

谢谢

推荐答案

可以使用CSS将它们分成列。那就是使用CSS3列属性。但是，它不适用于IE。

It is possible to break them into columns with CSS only. That would be to use the CSS3 columns Property. However, it won't work on IE.

#jtable-create-form {
  display: block;
  width: 450px;
  -moz-column-gap:40px;
  -webkit-column-gap:40px;
  column-gap:40px;
  -moz-column-count:2;
  -webkit-column-count:2;
  column-count:2;
}

这是工作示例 http://jsfiddle.net/shodaburp/Euwsm/1/ 上面的代码

Here's working example http://jsfiddle.net/shodaburp/Euwsm/1/ with the above code

这篇关于将单列文本输入重新排列为多列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！