css - 使用 JQuery UI 对话框和 CSS float :left

Question

我有一个包含两列表单元素的 JQuery UI 对话框。我正在使用 CSS float: left 来创建列。问题是对话框只显示一列。我错过了什么？

http://jsfiddle.net/CV9RG/1/

Answer 1

你的列有 float:left 这意味着如果它们在父级上没有足够的空间来并排放置，它们就会换行。您可以将对话框的宽度设置为 auto 并为您的列固定宽度以使其适合:

$('#mydialog').dialog({ 
  modal: true,
  resizable: false,
  autoOpen: false,
  dialogClass: 'no-close',
  width : 'auto'
})

和 CSS:

.select-col { float: left;width:250px}

查看此演示 http://jsfiddle.net/CV9RG/11/