Question

如果我有以下HTML。为什么li的内容会下降一行？

我正在寻找行为的解释以及如何修复

＆＃13;

<html>
    <body>    
        <div>
            <ol>
                <li>
                    <div>
                        <div style='width:65%;float:left;'>
                            Left Text
                        </div>
                        <div style="width:35%;float:left;font-style: italic;">
                            Right Text
                        </div>
                        <div style='clear:both;'></div>
                    </div>
                </li>
            </ol>
        </div>
    </body>
</html>

＆＃13;

<html>
    <body>
        <div>
            <ol>
                <li>
                    <table>
                        <tbody>
                            <tr><td>left</td><td>right</td></tr>
                        </tbody>
                    </table>
                </li>
            </ol>
        </div>
    </body>
</html>

＆＃13;

Answer 1

默认情况下，DIV设置为display: block，因此它不会与LI保持在同一行。

如果将其设置为display: inline;，则会强制它保持在同一行

＆＃13;

<html>
        <body>    
            <div>
                <ol>
                    <li>
                        <div style="display: inline;">
                            <div style='width:65%;float:left;'>
                                Left Text
                            </div>
                            <div style="width:35%;float:left;font-style: italic;">
                                Right Text
                            </div>
                            <div style='clear:both;'></div>
                        </div>
                    </li>
                </ol>
            </div>
        </body>
    </html>

＆＃13;

修改

正如Billy所说，浮动存在问题，但将它们更改为内联块会增加另一个问题，即边距look at this explanation

添加SPAN而不是div不会解决问题，因为不同之处在于默认情况下SPAN为display: inline;（与我们现在使用DIV相同）

＆＃13;
＆＃13;
<html> <body> <div> <ol> <li> <div style="display: inline;"> <div style="width:65%;display: inline-block;margin-right: -2px;">Left Text</div> <div style="width:35%;display: inline-block;font-style: italic;margin-left: -2px;">Right Text</div> </div> </li> </ol> </div> </body> </html>
＆＃13;
＆＃13;
＆＃13;

LI中的Div在内容之前导致额外的行

1 个答案: