如何以百分比设置 ul 宽度

Question

我有html：

<div class="wd">
    <ul id="postlist">
        <li><span class="num">h1</span>
            <ul>
                <li><span class="dt">h2</span>
                    <ul>
                         <li><span class="pun">h3</span></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><span class="num">1<br/>11<br/>111</span>
            <ul>
                <li><span class="dt">1.1</span>
                    <ul>
                        <li><span class="pun">1.1.1</span></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><span class="num">2<br/>2</span>
            <ul>
                <li><span class="dt">2.1</span>
                    <ul>
                        <li><span class="pun">2.1.1</span></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

如何设置CSS宽度#postlist 100%，.num，.dt，.pun - 每个33%？

http://jsfiddle.net/mma75kq7/

Answer 1

你可以做到这一点，但你需要稍微改变一下你的css：

• 外包装器，.wd将其设置为显示表和 100% 宽度，或者如果您打算在其中添加其他东西，可以将整个东西包装在带有显示表和 100% 宽度的div 中
• 顶部<li>将其设置为宽度为 33.3333%
• 然后<ul>内部的<ul>给它的宽度为 66.6666%
• 子项<ul>内的<li>，带有.dt和另一个ul，将两个子项设置为显示表单元格，并且对下一个子项设置相同
• 它应该开始了。

或者，如果您计划显示表格数据，则可以只使用常规<table>，而不是倾注 css 规则来模拟表行为。（似乎要从"卧底"表上拉出大量的标记）

在此处查看演示或下面的片段：

.wd {
  width: 100%;
  display: table;
}
ul {
  display: table-cell;
  vertical-align: top;
  list-style: none outside none;
  width: 100%;
  padding: 0;
}
ul ul {
  width: 66.6666%;
}
li {
  vertical-align: top;
  display: table;
  width: 100%;
}
.num {
  display: table-cell;
  width: 33.3333%;
}
.dt {
  display: table-cell;
  width: 50%;
}
.pun {
  display: table-cell;
  width: 50%;
}
ul#postlist >li {
  border-bottom: 1px solid black;
}

<div class="wd">
  <ul id="postlist">
    <li><span class="num">h1</span>
      <ul>
        <li><span class="dt">h2</span>
          <ul>
            <li><span class="pun">h3</span>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><span class="num">1<br/>11<br/>111</span>
      <ul>
        <li><span class="dt">1.1</span>
          <ul>
            <li><span class="pun">1.1.1</span>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><span class="num">2<br/>2</span>
      <ul>
        <li><span class="dt">2.1</span>
          <ul>
            <li><span class="pun">2.1.1</span>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 2

我姗

姗来迟地提供了以下简化的HTML和CSS，以达到相同的结果。

.wd {
    width:100%;
}
ul#postlist {
    display: table;
    width:100%;
    margin: 0;
    padding: 0;
}
ul#postlist > li {
    display:table-row;
}
.num, .dt, .pun {
    display:table-cell;
    vertical-align: top;
    list-style: none outside none;
    width: 33.333333333%;
    border-bottom: 1px solid black;
}

<div class="wd">
    <ul id="postlist">
        <li>
            <div class="num">h1</div>
            <div class="dt">h2</div>
            <div class="pun">h3</div>
        </li>
        <li>
            <div class="num">1
                <br/>11
                <br/>111</div>
            <div class="dt">1.1</div>
            <div class="pun">1.1.1</div>
        </li>
        <li>
            <div class="num">2.
                <br/>2..</div>
            <div class="dt">2.1</div>
            <div class="pun">2.1.1</div>
        </li>
    </ul>
</div>