我正在尝试用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; "> 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; "> C</li>
</ul></body></html>
我想确保一行中只有3个LI元素。第四个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; "> 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; "> C</li>
</ul>
</li>
</ul>
</body></html>