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将其设置为显示表格＆amp; 100％宽度，或者如果您打算在其中放置其他东西，可以用显示表和100％宽度将整个东西包裹在自己的div中
顶部<li>将其设置为宽度为33.3333％
然后<ul>内的<ul>给它宽度66.6666％
子<li>内的<ul>，.dt和另一个ul，将两个子设置为显示表格单元格，并为下一个子项设置相同
它应该开始了。

或者如果您计划显示表格数据，而不是使用css规则来模仿表格行为，那么您可以使用常规<table>。（似乎需要大量的标记来实现＃39;卧底＆＃39;表）

查看 demo here 或下面的摘录：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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>

如何设置ul宽度百分比？

2 个答案: