IE 8兼容模式導致表單提交按鈕自動換行

Question

下面的代碼實現了我在使用兼容模式時使用IE瀏覽器檢查的瀏覽器中想要的功能。

在兼容模式下，submit（ 刪除 ）按鈕將換行到下一行。 不使用兼容模式時，它看起來應該像在Firefox或IE中一樣。

無法使用float:left/right因為我無法事先指定長度。

 <div> <ul style="display:inline-table"> <li style="text-align:left; white-space:nowrap"> <div> <div style="display:table-cell; width:100%"><b>Name: </b>Test Name That is Longer Than The Other <b>Qty: </b>1</div> <div style="display:table-cell"> <form style="margin:0; padding:0" name="remcart" method="post" action="page_name.html"> <input name="Quantity" value="0" type="hidden" /> <input style="margin:0; padding:0; margin-left:5px" type="submit" value="Remove" name="rembutton" /> </form> </div> </div> </li> <li style="text-align:left; white-space:nowrap"> <div> <div style="display:table-cell; width:100%"><b>Name: </b>Short Test Name <b>Qty: </b>1</div> <div style="display:table-cell"> <form style="margin:0; padding:0" name="remcart" method="post" action="page_name.html"> <input name="Quantity" value="0" type="hidden" /> <input style="margin:0; padding:0; margin-left:5px" type="submit" value="Remove" name="rembutton" /> </form> </div> </div> </li> </ul> </div> 

Answer 1

<style>
    form {
        display: inline;
    }
</style>

<ul style="display:inline-table">
    <li style="text-align:left; white-space:nowrap">
        <div>
            <span><b>Name: </b>Test Name That is Longer Than The Other <b>Qty: </b>1</span>
            <form style="margin:0; padding:0" name="remcart" method="post" action="page_name.html">
            <input name="Quantity" value="0" type="hidden" />
            <input style="margin:0; padding:0; margin-left:5px" type="submit" value="Remove" name="rembutton" />
            </form>
        </div>
    </li>
    <li style="text-align:left; white-space:nowrap">
        <div>
            <span><b>Name: </b>Test Name That is Longer Than The Other <b>Qty: </b>1</span>
            <form style="margin:0; padding:0" name="remcart" method="post" action="page_name.html">
            <input name="Quantity" value="0" type="hidden" />
            <input style="margin:0; padding:0; margin-left:5px" type="submit" value="Remove" name="rembutton" />
            </form>
        </div>
    </li>    
</ul>