Question

我正在尝试用UL LI替换HTML Table。如下所述，有三行三列。

<html>
<body style="margin: 0px;">
<ul style="align:center; width:92%; margin:5px; overflow:hidden; min-width:500px;">
<li style="float:left; display:inline; width:5%; min-height: 50px; ">A</li>
<li style="float:left; display:inline; width:87%; min-height: 50px; ">B</li>
<li style="float:left; display:inline; width:8%; min-height: 50px; "><input type="submit" name="one" id="one" value="one"></input></li>

<li style="float:left; display:inline; width:5%; min-height: 100px; ">A</li>
<li style="float:left; display:inline; width:87%; min-height: 100px; "><div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 100px;" >Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. </div></li>
<li style="float:left; display:inline; width:8%; min-height: 100px; "> &nbsp; C</li>

<li style="float:left; display:block; width:5%; min-height: 100px; "><input type="radio" name="optia" value="a" id="optia" />A</li>
<li style="float:left; display:inline; width:87%; min-height: 100px; "><div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 100px;" >Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. </div></li>
<li style="float:left; display:inline; width:8%; min-height: 100px; "> &nbsp; C</li>

</ul></body></html>

我想确保一行中只有3个li元素。第四个LI元素必须从新行开始。这里第7个LI元素与第二行一起出现;你可以帮忙解决这个错误吗？

Answer 1

<html><head></head><body style="margin: 0px;">
<ul style="display: table; text-align:center; width:92%; margin: 5px; padding: 0; overflow:hidden; min-width:500px;">
  <li style="display:table-row; padding: 0; margin: 0;">
    <ul style="padding: 0; margin: 0;">
      <li style="float:left; display:table-cell; width:5%; min-height: 50px; ">A</li>
      <li style="float:left; display:table-cell; width:87%; min-height: 50px; ">B</li>
      <li style="float:left; display:table-cell; width:8%; min-height: 50px; "><input type="submit" name="one" id="one" value="one"></li>
    </ul>
  </li>

  <li style="display:table-row; padding: 0; margin: 0;">
    <ul style="padding: 0; margin: 0;">
      <li style="float:left; display:table-cell; width:5%; min-height: 100px; ">A</li>
      <li style="float:left; display:table-cell; width:87%; min-height: 100px; "><div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 100px;">Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. </div></li>
      <li style="float:left; display:table-cell; width:8%; min-height: 100px; "> &nbsp; C</li>
    </ul>
  </li>

  <li style="display:table-row; padding: 0; margin: 0;">
    <ul style="padding: 0; margin: 0;">
      <li style="float:left; display:table-cell; width:5%; min-height: 100px; "><input type="radio" name="optia" value="a" id="optia">A</li>
      <li style="float:left; display:table-cell; width:87%; min-height: 100px; "><div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 100px;">Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. Sample Text here. </div></li>
      <li style="float:left; display:table-cell; width:8%; min-height: 100px; "> &nbsp; C</li>
    </ul>
  </li>
</ul>
</body></html>

如何在一行中限制3个LI元素（用UL LI替换HTML表）

1 个答案: