css - 内部元素与父级元素重叠

Question

我有一个包含 ul 和一些 li 的 div。 li 的样式将它们显示为列表。在包装 div 的左侧有一个 float div。

我不明白为什么li可以与 float div重叠，我检查了display、border-box属性等，但没有任何线索。

屏幕:

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;
}

<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>

演示: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;
}