CSS样式的<ul>作为表</ul>

时间:2015-03-07 12:43:48

标签: javascript html css

我想使用元素循环来创建表。 我把每一行放一个并把它放在一边,就像这样:

HTML:

<div class="tableEmulator">
   <ul class="trEmulator">
      <li class="tdEmulator">Some text</li>
      <li class="tdEmulator">Some text</li>
    </ul>
    <ul class="trEmulator">
      <li class="tdEmulator">Some text</li>
      <li class="tdEmulator">Some text</li>
   </ul>
</div>

CSS:

.tableEmulator {
    width: auto;
    height: auto;
    border: 1px solid;
    border-color: blue;
}
.trEmulator {
    clear:both;
    border: 1px solid;
    border-color: red;
    with:auto;
}
.trEmulator li {
    list-style:none;
    float:left;
    position: relative;
    padding: 5px 10px;
    border: 1px solid #eee; 
}

然而我陷入了css试图进入我桌子的外边界。 我期望宽度/高度:auto;会做的,但事实并非如此。有什么建议?

提前致谢!

小提琴:http://jsfiddle.net/AsleG/baLhx3v0/

2 个答案:

答案 0 :(得分:1)

您可以尝试使用CSS flex。

更新示例: http://jsfiddle.net/baLhx3v0/5/

.tableEmulator {
    display: inline-flex;
    flex-direction: column;
    border: 1px solid;
    border-color: blue;
}
ul.trEmulator {
    display:flex;
    clear:both;
    border: 1px solid;
    border-color: red;
    width:auto;

}
.trEmulator li {
    list-style:none;
    position: relative;
    padding: 5px 10px;
    border: 1px solid #eee; 
}

您可以在此处找到有关Flex的更多信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

答案 1 :(得分:0)

如果你设置宽度/高度auto,他会占用剩下的所有可用空间。在你的链接中,我将宽度设置为~200px,我认为这就是你想要的。

确保他只能从遗传元素中获得太多空间,以至于他只能获得他必须使用的空间。

(当然你可以给他自动选项)