Question

我的问题是：是否定义了以下行为或是否为错误？

我已经看到了各种解决方法的答案，但没有看到行为本身。

默认情况下，每个＆lt; li＆gt;的项目符号都是对于一个浮动的块，在块内而不是向右渲染。然而，这就是我期望它渲染的方式（块和子弹之间的空间，直到＆lt; li＆gt; s下降到元素下方，然后父块的边缘和子弹之间的空间相同）： / p>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <style type="text/css">
        .my_div  {
            float: left;
            background-color: #CCF;
            /* To push <li>s out */
            margin-right: 25px;
        }
        .my_ul   {
            /* Consistency across all browsers */
            padding-left: 25px;
            /* Fix for Opera only */
            list-style-position: inside;
        }
    </style>
</head>
<body>
    <div class="my_div">Some text<br>Second line</div>
    <ul class="my_ul">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</body>
</html>

尝试删除.my_ul样式和margin-right并再次查看。我希望它会以同样的方式呈现，但事实并非如此。它在我测试过的所有浏览器中都是一样的（Opera 12，Firefox 17，Chrome 23，Internet Explorer 8，Safari 5）。

Answer 1

检查sample和code。我刚为<ul>元素提供了 margin-left 。我对齐了块，左边是列表项，右边是列表项。这是你的需要吗？

Answer 2

解决方法如下：

ul {
    margin-left:0; list-style-type:none;
}
ul li:before{
    content:"\25cf\00A0\00A0\00A0";
}

ul和块元素向左浮动

2 个答案: