css:UL和LI应该溢出包含TD

时间:2012-06-25 19:04:19

标签: html css

我有一个包含UL和LI的TD。我想让列表流到TD之外。如果我使用position:absolute所有的LI堆叠在一起。有没有办法让LIs保持相对于彼此的位置,并且仍然在包含TD之外流动?

编辑添加了代码(它是用rails编写的,但我已经包含了生成的HTML):

CSS

#calendar li {
width: 265px;
 position: absolute;
 background: palegreen;
}

生成的HTML

<td class="weekend">
    24
     <ul>
    <li>
        Deleware (2)
    </li>
  </ul>
</td>

2 个答案:

答案 0 :(得分:2)

您是否尝试过添加

position:relative;

到td元素。

(就像这个http://jsfiddle.net/ZGyDW/

Afaik这是父元素所必需的,以便将子元素绝对定位在其中。

答案 1 :(得分:0)

我重读了您的解释并更新了我的fiddle。我不知道你是否能够添加元素,但是你可以尝试将所有ul包裹在div中并绝对定位div。这是我的CSS:

table {
    color: #666;
    font: 16px normal Arial, Helvetica, sans-serif;
    margin: 30px;
}

td {
    border: 1px solid #f00;
    height: 200px;
    padding: 5px;
    position: relative;
    vertical-align: top;
    width: 200px;
}

div {
    position: absolute;
}

ul {
    border: 1px solid #00f;
    margin: 5px 0;
    width: 300px;
    z-index: 2;
}

li {
    border: 1px solid #0f0;
    padding: 5px;
}​