javascript - <UL> 的 CSS 样式作为表格

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 中试图使我的表的外边框。 我期望宽度/高度:自动；可以解决问题，但事实并非如此。有什么建议么？

提前致谢!

fiddle :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/