如何在一行中限制3個LI元素（用UL LI替換HTML表格）

我試圖用UL LI替換HTML表格。有三行三列如下所述。如何在一行中限制3個LI元素（用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元素與第二行一起;你能幫助解決這個錯誤嗎？

來源

2014-01-29 Pawan Mude

'clear'每隔四分鐘浮動... – CBroe

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

來源

2014-01-29 12:19:32 SoAwesomeMan

真棒解決方案:) –

如何在一行中限制3個LI元素（用UL LI替換HTML表格）

回答

相關問題