1

我的问题是：以下行为是定义还是错误？

我已经看到了各种解决方法的答案，但不是关于行为本身。

默认情况下，每个 <li> 对向左浮动的块的子弹在块内而不是右侧呈现。但是，这就是我希望它呈现的方式（块和项目符号之间的空间，直到 <li>s 下降到元素下方，然后父块的边缘和项目符号之间的空间量相同）：

<!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）上都一样。

4

2 回答 2

0

Check the sample and code. Just I provided margin-left for the <ul> element. I aligned block is left and list item in right. Is this your wants?

于 2012-12-11T06:20:40.753 回答
0

解决方法可能如下：

ul {
    margin-left:0; list-style-type:none;
}
ul li:before{
    content:"\25cf\00A0\00A0\00A0";
}
于 2013-01-26T21:10:54.280 回答