html - 如何在一行中限制 3 个 LI 元素(用 UL LI 替换 HTML 表格)

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

<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 元素与第二行一起；你能帮忙解决这个错误吗？

最佳答案

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

关于html - 如何在一行中限制 3 个 LI 元素(用 UL LI 替换 HTML 表格)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21429933/

html - 如何在一行中限制 3 个 LI 元素(用 UL LI 替换 HTML 表格)

上一篇：html - CSS UL 作为表格，左浮动

下一篇：html - 我认为链接 div id 在 html 位置不起作用