Question

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

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/

Answer 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/

Answer 2

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

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

（当然你可以给他自动选项）

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

2 个答案: