ul和block元素向左浮动
[英]ul and block elements floated left
问题描述
My question is: Is the following behaviour defined or is it a bug? 
我的问题是：是否定义了以下行为或它是一个错误？
I have seen answers with various workarounds, but not about the behaviour itself. 我已经看到了各种解决方法的答案，但是没有关于行为本身的答案。
By default the bullets for each <li> against a block which is floated left get rendered inside the block instead of to the right. 默认情况下，每个<li>相对于浮动块的项目符号都将在块内部而不是右侧显示。 However, this is how I would expect it to render (space between the block and the bullets until the <li>s drop below the element, then the same amount of space between the edge of the parent block and the bullets): 但是，这就是我希望它呈现的方式（块和项目符号之间的空间，直到<li>降到元素下方，然后父块边缘和项目符号之间的空间相同）：
<!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>
Try removing the .my_ul style and margin-right and view again. 尝试删除.my_ul样式和margin-right然后再次查看。 I expected that it would render the same way but it doesn't. 我期望它将以相同的方式呈现，但事实并非如此。 It works the same in all browsers that I have tested it on (Opera 12, Firefox 17, Chrome 23, Internet Explorer 8, Safari 5). 在所有我测试过的浏览器（Opera 12，Firefox 17，Chrome 23，Internet Explorer 8，Safari 5）中，它的工作原理都相同。
2 个解决方案
解决方案1
0 2012-12-11 06:20:40
解决方案2
0 2013-01-26 21:10:54
A workaround could be as follows: 解决方法如下：
ul {
margin-left:0; list-style-type:none;
}
ul li:before{
content:"\25cf\00A0\00A0\00A0";
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.