有人使用仅限CSS的解决方案,使<a>
的内容(<li>
)与<li>
本身的高度相等 - <li>
等于父(<nav>
)?
“过滤器”-Button应该是<nav>
看到它的实际效果: http://jsbin.com/qalufokimo/
body {
background-color: white;
font-family: 'Open Sans';
font-weight: 300;
}
html,
body {
height: 100%;
}
.filter h2,
.filter h3 {
color: white;
}
.filter {
background-color: #19679e;
font-size: 16px;
display: block;
}
.filter a,
.filter label {
color: #FFFFFF;
cursor: pointer;
}
.filter ul {
list-style: none;
padding: 0;
margin: 0;
}
.filter.dropdown form {
visibility: hidden;
opacity: 0;
position: absolute;
left: 0;
right: 0;
background-color: #19679e;
width: 100%;
z-index: 1;
transition: all .25s ease-in-out;
}
.filter.dropdown nav {
height: 100%;
}
.filter.dropdown nav>ul {
vertical-align: middle;
border-collapse: separate;
display: table-row;
height: 100%;
}
.filter.dropdown nav>ul>li {
display: block;
display: table-column;
float: left;
margin-right: 8px;
display: table-cell;
height: 100%;
vertical-align: top;
}
@media (min-width: 768px) {
.filter.dropdown nav>ul>li {
float: none;
}
}
.filter.dropdown nav>ul>li:first-child {
float: none;
margin-right: 24px;
float: left;
width: 100%;
margin-top: 4px;
}
@media (min-width: 768px) {
.filter.dropdown nav>ul>li:first-child {
float: none;
width: auto;
margin-top: 0;
}
}
.filter.dropdown nav>ul>li:first-child>a:focus {
pointer-events: none;
}
.filter.dropdown nav>ul>li:first-child>a:focus+form {
position: absolute;
visibility: visible;
opacity: 1;
}
.filter.dropdown nav>ul>li:first-child a {
height: 100%;
padding: 16px;
display: inline-block;
background-color: #4785b1;
position: relative;
display: flex;
align-items: center;
}
@media (min-width: 768px) {
.filter.dropdown nav>ul>li:first-child a {
justify-content: center;
}
}
.filter.dropdown nav>ul>li:first-child a:hover {
text-decoration: none;
background-color: #19679e;
}
.filter.dropdown nav>ul>li:first-child a:focus {
text-decoration: none;
}
.filter.dropdown nav>ul>li:first-child a [class^="icon-"],
.filter.dropdown nav>ul>li:first-child a [class*=" icon-"] {
position: absolute;
right: 16px;
top: calc(50% - 7px);
margin-left: 0;
}
@media (min-width: 768px) {
.filter.dropdown nav>ul>li:first-child a [class^="icon-"],
.filter.dropdown nav>ul>li:first-child a [class*=" icon-"] {
position: unset;
margin-left: 6px;
margin-top: 5px;
}
}
.filter.dropdown nav>ul>li:not(:first-child) {
padding-top: 8px;
padding-bottom: 16px;
}
@media (min-width: 768px) {
.filter.dropdown nav>ul>li:not(:first-child) {
padding-left: 16px;
padding-right: 16px;
}
}
.filter.dropdown nav>ul>li:not(:first-child) a {
position: relative;
margin-top: 8px;
margin-right: 8px;
background-color: #4785b1;
display: inline-block;
float: left;
border-radius: 24px;
padding-left: 16px;
padding-right: 30px;
padding-top: 2px;
padding-bottom: 4px;
}
.filter.dropdown nav>ul>li:not(:first-child) a span:first-child {
max-width: 16em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
float: left;
}
.filter.dropdown nav>ul>li:not(:first-child) a [class="icon-"],
.filter.dropdown nav>ul>li:not(:first-child) a:hover {
text-decoration: none;
}
.filter.dropdown nav>ul>li:not(:first-child) a [class="icon-"] [class^="icon-"],
.filter.dropdown nav>ul>li:not(:first-child) a [class="icon-"] [class*=" icon-"],
.filter.dropdown nav>ul>li:not(:first-child) a:hover [class^="icon-"],
.filter.dropdown nav>ul>li:not(:first-child) a:hover [class*=" icon-"] {
color: #19679e;
}
.filter.dropdown nav>ul>li:not(:first-child) a [class^="icon-"],
.filter.dropdown nav>ul>li:not(:first-child) a [class*=" icon-"] {
top: 1px;
right: 8px;
font-size: 14px;
transition: all .1s ease-in-out;
z-index: 0;
position: absolute;
top: calc(50% - 7px);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="filter dropdown">
<nav class="container">
<ul>
<li>
<a href="#" class="toggle">Filter
<span class="icon-chevron-right glyphicon glyphicon-chevron-down"><!-- --></span>
</a>
<form enctype="multipart/form-data" id="" method="post" action="" class="">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3>Channels</h3>
<ul class="row" role="menu">
<li>
<input type="checkbox" value="1" class="checkbox-widget list-field" name="channel:list" id="channel-1">
<label for="channel-1"><span class="label">Channel 1</span></label>
</li>
</ul>
</div>
</div>
</div>
</form>
</li>
<li>
<h3 class="sr-only">Ausgewählte Filter</h3>
<a href=""><span>Lorem ipsum</span> <span class="sr-only">- remove filter,</span><span class="icon-chevron-right glyphicon glyphicon-remove-sign"><!-- --></span></a>
<a href=""><span>Lorem ipsum dolor sit amet</span> <span class="sr-only">- remove filter,</span><span class="icon-chevron-right glyphicon glyphicon-remove-sign"><!-- --></span></a>
<a href=""><span>Lorem ipsum dolor sit amet, consectetur adipiscing</span> <span class="sr-only">- remove filter,</span><span class="icon-chevron-right glyphicon glyphicon-remove-sign"><!-- --></span></a>
<a href=""><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tortor nisi, suscipit</span> <span class="sr-only">- remove filter,</span><span class="icon-chevron-right glyphicon glyphicon-remove-sign"><!-- --></span></a>
</li>
</ul>
</nav>
</section>
<p>fasfalsfjj fj asdf</p>
提前谢谢