内部元素与父级兄弟重叠

Question

我有一个包含ul和一些li的div。 li被设计为将其显示为列表。在包装div的左边有一个浮动div。

我无法理解为什么li可以与浮动div重叠，我检查了显示，边框属性等等，但我没有线索。

屏幕：

＆＃13;

＆＃13;

div.myDropdown {
	position: relative;
	display: inline-block;
	font-size: 13px;
	zoom: 1;
	*display: inline;
	-webkit-user-select: none;
	   -moz-user-select: none;
		    user-select: none;
}
div.myDropdown * {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
		    box-sizing: border-box;		
}
div.myDropdown  div.mySelect {
	width: 100%;
	height: 24px;
	border: 1px solid #4195fc;
	border-radius: 6px;
	box-shadow: 0px 0px 4px #4195fc; 
	padding-top: 2px;
	padding-bottom: 2px;
	height: 100% !important;
}


div.myDropdown>a div.myArrow {
	position: absolute;
	top: 2px;
	right: 0;
	display: block;
	width: 18px;
	height: 100%;
}
div.myDropdown>a div.myArrow.myArrowDown::before {
    font-family: FontAwesome;
    content: "\f078";
    font-size: 17px;
	color: #999;
}
div.myDropdown  ul.mySelection {
	display: inline;
	list-style-type: none;
	padding: 0;
}
div.myDropdown  div.mySelect ul.mySelection>li {
	display: inline-block;
	border: 1px solid #4195fc;
	margin: 2px;
	border-radius: 3px;
	padding-left: 2px;
	padding-right: 2px;
}
div.myDropdown  div.mySelect ul.mySelection>li>span.myDeselect::before {
	font-family: FontAwesome;
    content: "\f00d";
    font-size: 10px;
	padding-left: 2px;
	padding-right: 2px;
}

＆＃13;

<div class="myDropdown" style="width: 296px;"><a><div class="mySelect myMultiple"><span class="myValue" style="display: none;"></span><div class="myArrow myArrowDown"></div><ul class="mySelection"><li data-val="CL">Chile<span class="myDeselect"></span></li><li data-val="CN">China<span class="myDeselect"></span></li><li data-val="CX">Christmas Island<span class="myDeselect"></span></li><li data-val="CC">Cocos (Keeling) Islands<span class="myDeselect"></span></li><li data-val="CG">Congo<span class="myDeselect"></span></li><li data-val="CO">Colombia<span class="myDeselect"></span></li></ul></div></a></div>

＆＃13;

＆＃13;

＆＃13;

演示：http://jsfiddle.net/IrvinDominin/aoro5pas/

Answer 1

这是因为.myArrow div位于绝对位置，宽度为18px。 ul的宽度为100％，因此不会考虑这些18px。你可以做到

div.myDropdown ul.mySelection {
    display: inline-block;
    list-style-type: none;
    padding: 0;
    width: calc(100% - 18px); /*Reduce the ul width by 18px so avoid overlapping*/
}

或另一种解决方案是为ul

添加保证金或填充

div.myDropdown ul.mySelection {
    display: inline-block;
    list-style-type: none;
    /*Add either of these 2 */
    padding: 0 18px 0 0;
    margin: 0 18px 0 0;
}

Answer 2

我认为你所说的div是'#myArrow'？这个div的格式是position：absolute，这意味着其他组件会重叠它。见this

我会把

padding-right: 20px;

在容器div上以防止重叠

Answer 3

浏览器默认值也可能是一个问题。

对于一致的跨浏览器结果，从浏览器CSS重置开始不会有什么坏处。使用normalize.css和HTML和CSS代码不变，这是我得到的：
http://jsfiddle.net/panchroma/2xs1u941/1/

易于检查，添加以下内容

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css">

Normalize.css