CSS

Question

所以我有一个用ul / li完成的组合框，当你点击一个锚点时它会打开。我的问题是它是模态对话框（jquery-ui）的一部分，对话框本身只有2-3个元素，所以它相当小。我的组合框大约有12个元素（它实际上是变量）所以它实际上比模态窗口本身大。

所以现在，当我打开组合框时，它会在对话框中添加一个滚动条。有没有办法让元素在某种程度上延伸出对话框？

或者有关如何使此对话框更直观的建议？：）

这是html：

<div id="select">
<a id="combo">combo</a>
<div id="combul_div">
<ul id="comboul">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>
</div>
</div>
<a id="click">Click</a>

这是我使用的js

$('#click').click(function () {
$('#select').dialog({ 
    modal: true,
    resizable: false,
    position: 'center'
 });
});

$('#combo').click(function() {
    $('#comboul').toggle();   
})

这是我正在使用的CSS：

#select {
 display: none;
}
#combo {
    width: 100px;
}
#comboul_div{
    width: 100px;
}
#comboul {
    display: none;
    position: absolute;
    width: 100px;
    border: 1px solid grey;
}

这是一个精简版本的jsfiddle：http://jsfiddle.net/cspHy/7/

Answer 1

@biziclop提供了正确的解决方案。

只是在这里回答，

CSS

.ui-dialog, .ui-dialog .ui-dialog-content {
    overflow: visible !important;
}

#select {
 display: none;
}
#combo {
    width: 100px;
}
#comboul_div{
    width: 100px;
}
#comboul {
    display: none;
    position:absolute;
    width: 100px;
    border: 1px solid grey;
}

#comboul可以绝对定位，也可以定位float :left

有没有办法让ul伸展出模态

1 个答案:

CSS