html - 带有内联 block 元素的 CSS 定位故障

Question

请考虑以下代码片段。

我的问题是:为什么第二个 li，即具有 filterdivision 类的那个，在布局中比前一个低而不是垂直对齐？我给了它相同的高度，但没有看到可能将其向下推的边距或填充。

Javascript 代码与问题无关，但允许片段发挥作用。

var triggerFilter = function(filterData)
{
	console.log(filterData);
}

$(".customDropdown li").on('click',function(){
    var $self = $(this);
    var $list = $self.parent();
    if($list.hasClass("listVisible"))
    {	//Whole list is visible => Selecting an option 
    	$list.find('.active').removeClass("active");
        $self.addClass("active");
        $list.removeClass("listVisible");
        triggerFilter({filterName:$list.data("fieldname"),filterValue:$self.data("fieldvalue")});
    }
    else
    {
        //Show whole list
    	$list.addClass("listVisible");
    }
	
});

.wrapper { background: #f2f2f2;; padding: 20px;position: relative;height:60px;}
.wrapper input { box-sizing: border-box; border: 1px solid #c2c2c2; font-size: 14px; padding: 10px 15px; width: 100%;}
.wrapper ol.filters { padding:0; margin: 0;	font-size: 0; height:58px;}
.wrapper ol.filters > li
{
	list-style-type: none;
	display: inline-block;
	width: 150px;
	margin-right:20px;
	height: 58px;/*Need to fix height because of absolute positionned fake dropdowns*/
	position:relative;
}

.wrapper ol.filters > li:last-child{ margin-right:0;}
.wrapper ol.filters > li:first-child{ width: 150px;}
.wrapper label { display:block;	font-size:12px;	color: #797979;	margin-bottom: 3px;}

/* CSS for custom dropdown */
.customDropdown {
    position:absolute;
    z-index: 50;
    padding:0;
    margin:0;
    list-style-type: none;
    background: #fff;
    border: 1px solid #c2c2c2;
    cursor: pointer;
    width:150px;
}
.customDropdown li {display:none;padding: 10px 15px;font-size:14px;}
.customDropdown li::after { position: absolute; top: 10px; right: 10px; content: ""; display: inline-block; width: 0.5em; height: 0.5em; border-right: 2px solid black; border-bottom: 2px solid black; transform: rotate(45deg);}

.customDropdown li.active {display:block;}
.customDropdown.listVisible li {display:block;border-bottom: 1px solid #f2f2f2;}
.customDropdown.listVisible li:hover {background: #f2f2f2;color:#4fbbeb;}
.customDropdown.listVisible li.active {color:#4fbbeb;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
   <ol class="filters">
       <li class="filterSearch">
           <label for="filterSearch">Search</label><input type="text" id="search">
       </li>
       <li class="filterDivision">
           <label>Division</label>
           <ol class="customDropdown" data-fieldname="division">
               <li class="active" data-fieldvalue="all">All divisions</li>
               <li data-fieldvalue="consulting">Consulting</li>
               <li data-fieldvalue="digital">Digital</li>
               <li data-fieldvalue="other">Other</li>
           </ol>
       </li>
       <!-- ... Other filter options in li tags -->
    </ol>
</div>

Answer 1

尝试使用

float:left

代替

display:inline-block

在

.wrapper ol.filters > li

虽然这在这里似乎不是问题，但是 float 元素不会影响父元素的高度，除非你添加

clear:both;
overflow:auto;

父元素样式如下:

<div style="clear:both; overflow:auto">
     <div style="float:left">hello</div>
     <div style="float:left">world</div>
</div>

这是您使用 float 元素的代码片段(我不确定是什么导致了您的问题，但向左浮动可以解决问题)

var triggerFilter = function(filterData)
{
	console.log(filterData);
}

$(".customDropdown li").on('click',function(){
    var $self = $(this);
    var $list = $self.parent();
    if($list.hasClass("listVisible"))
    {	//Whole list is visible => Selecting an option 
    	$list.find('.active').removeClass("active");
        $self.addClass("active");
        $list.removeClass("listVisible");
        triggerFilter({filterName:$list.data("fieldname"),filterValue:$self.data("fieldvalue")});
    }
    else
    {
        //Show whole list
    	$list.addClass("listVisible");
    }
	
});

.wrapper { background: #f2f2f2;; padding: 20px;position: relative;height:60px;}
.wrapper input { box-sizing: border-box; border: 1px solid #c2c2c2; font-size: 14px; padding: 10px 15px; width: 100%;}
.wrapper ol.filters { padding:0; margin: 0;	font-size: 0; height:58px;}
.wrapper ol.filters > li
{
	list-style-type: none;
    float:left;
	width: 150px;
	margin-right:20px;
	height: 58px;/*Need to fix height because of absolute positionned fake dropdowns*/
	position:relative;
}

.wrapper ol.filters > li:last-child{ margin-right:0;}
.wrapper ol.filters > li:first-child{ width: 150px;}
.wrapper label { display:block;	font-size:12px;	color: #797979;	margin-bottom: 3px;}

/* CSS for custom dropdown */
.customDropdown {
    position:absolute;
    z-index: 50;
    padding:0;
    margin:0;
    list-style-type: none;
    background: #fff;
    border: 1px solid #c2c2c2;
    cursor: pointer;
    width:150px;
}
.customDropdown li {display:none;padding: 10px 15px;font-size:14px;}
.customDropdown li::after { position: absolute; top: 10px; right: 10px; content: ""; display: inline-block; width: 0.5em; height: 0.5em; border-right: 2px solid black; border-bottom: 2px solid black; transform: rotate(45deg);}

.customDropdown li.active {display:block;}
.customDropdown.listVisible li {display:block;border-bottom: 1px solid #f2f2f2;}
.customDropdown.listVisible li:hover {background: #f2f2f2;color:#4fbbeb;}
.customDropdown.listVisible li.active {color:#4fbbeb;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
   <ol class="filters">
       <li class="filterSearch">
           <label for="filterSearch">Search</label><input type="text" id="search">
       </li>
       <li class="filterDivision">
           <label>Division</label>
           <ol class="customDropdown" data-fieldname="division">
               <li class="active" data-fieldvalue="all">All divisions</li>
               <li data-fieldvalue="consulting">Consulting</li>
               <li data-fieldvalue="digital">Digital</li>
               <li data-fieldvalue="other">Other</li>
           </ol>
       </li>
       <!-- ... Other filter options in li tags -->
    </ol>
</div>