CSS定位毛刺与内联块元素

时间：2015-09-15 23:46:37

标签： html css

请考虑以下代码段。

我的问题是：为什么第二个li，一个类filterdivision，在布局中比前一个低，而不是与它垂直对齐？我把它给了它相同的高度，看不到可能会让它下降的边距或填充。

Javascript代码与问题无关，但允许代码段正常运行。

＆＃13;
＆＃13; 
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");
    }
	
});
＆＃13; 
.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;}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

尝试使用

float:left

而不是

display:inline-block

在

.wrapper ol.filters > li

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

clear:both;
overflow:auto;

到这样的父元素样式：

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

这是你使用浮动元素的代码片段（我不确定是什么原因导致你的问题，但浮动左边修复了它）

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>

答案 1 :(得分：0)

内联块是试图跨越整个宽度的块，而.wrapper没有设置宽度，这会强制它占用空间，而不是

＆＃13;
＆＃13; 
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");
    }
	
});
＆＃13; 
.wrapper { background: #f2f2f2;; padding: 20px;position: relative;height:150px; width: 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:116px;}
.wrapper ol.filters > li
{
	list-style-type: none;
	display: inline-block;
	width: 150px;
    margin-top: 10px;
	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:inline-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;}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题