我正在将 jTable 用于当前正在进行的一个元素,希望看看你们是否可以帮助解决我遇到的 CSS 问题。我在下面制作了一个 jsfiddle,当我向 jTable 添加新记录时会弹出该表单。因为我有很多行,所以它比可见屏幕长。您认为通过一些 CSS 调整可以使其成为两列或三列框吗?
我无法更改此表单的生成,因此它只能是 CSS。
表格的简短版本如下:
<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 columns 属性。但是,它不适用于 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/与上面的代码
关于jquery - 将单列文本输入重新排列为多列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15610156/