列数和分页符
Column-count and page-break
目前我正在我的开发服务器 (http://52.57.22.230/) 上的一个新菜单上工作(单击左上角徽标正下方 "Programme" 下方)。
Chrome 的行为与其他浏览器不同。我使用 column-count: 5
作为这个大小并设置 break-inside: avoid;
以获得 5 列,但从一个主题开始。 Edge、Firefox 的行为就像我希望的那样,Chrome 仅显示 3 列。我有点明白 chrome 做了 break-inside: avoid;
所说的,但我希望在所有浏览器中都具有与 Firefox 相同的行为。
菜单html:
<div class="overlay" style="display: block;">
<div class="wrap">
<div class="btn-close"></div>
<ul class="wrap-nav">
<div class="columnbreak">
<h3>
Rundreisen </h3>
<hr>
<ul>
<li><a href="http://52.57.22.230/Rundreisen">Allgemein zu Rundreisen</a></li>
</ul>
<h5>afrika</h5>
<ul>
<li><a href="http://52.57.22.230/Rundreisen/Kenia">Kenia</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
</ul>
<h5>asien</h5>
<ul>
<li><a href="http://52.57.22.230/Rundreisen/China">China (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Indien">Indien (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Indonesien">Indonesien/Bali (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
<li><a href="http://52.57.22.230/Rundreisen/Nepal">Nepal (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/SriLanka">Sri Lanka (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Thailand">Thailand (ab 17)</a></li>
</ul>
<h5>ozeanien</h5>
<ul>
<li><a href="http://52.57.22.230/Rundreisen/Fidschi">Fidschi (ab 17)</a></li>
</ul>
</div>
<div class="columnbreak" style="">
<h3>
Freiwilligenarbeit </h3>
<hr>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit">Allgemein</a></li>
</ul>
<h5>afrika</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana">Ghana (Gastfamilie)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana-accra">Ghana (Freiwilligenhaus)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia">Kenia (Nairobi)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia-Gatanga">Kenia (Gatanga)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Madagaskar">Madagaskar</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Namibia"><span class="aktion_menu">Namibia</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Sansibar"><span class="aktion_menu">Sansibar</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika+Namibia">Südafrika + Namibia</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Tansania">Tansania</a></li>
</ul>
<h5>asien</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Bali">Bali (Indonesien, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/China">China (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Flores">Flores (Indonesien, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Indien">Indien (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Laos">Laos (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Lombok">Lombok (Indonesien, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Malaysia">Malaysia (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Nepal">Nepal (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Philippinen">Philippinen (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/SriLanka">Sri Lanka (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Thailand">Thailand (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Vietnam">Vietnam (ab 17)</a></li>
</ul>
<h5>europa</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Albanien">Albanien</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Frankreich">Frankreich</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Portugal">Portugal</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Spanien"><span class="aktion_menu">Spanien</span></a></li>
</ul>
<h5>karibik</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Dominikanische_Republik">Dominikanische Republik</a></li>
</ul>
<h5>lateinamerika</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien">Argentinien (Córdoba)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien-buenos-aires">Argentinien (Buenos Aires)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Chile">Chile</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Costa_Rica">Costa Rica (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Ecuador">Ecuador (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Peru">Peru (Cusco, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/peru-norden">Peru (Norden, ab 17)</a></li>
</ul>
<h5>nordamerika</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kanada"><span class="aktion_menu">Kanada</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/USA"><span class="aktion_menu">USA</span></a></li>
</ul>
<h5>ozeanien</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Australien"><span class="aktion_menu">Australien</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Fidschi">Fidschi (ab 17)</a></li>
</ul>
</div>
<div class="columnbreak">
<h3>
Farmarbeit </h3>
<hr>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit">Allgemein zu Farmarbeit</a></li>
</ul>
<h5>afrika</h5>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit/Namibia">Namibia</a></li>
</ul>
<h5>europa</h5>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit/Frankreich">Frankreich</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Irland">Irland</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Schweiz">Schweiz (ab 16)</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Ungarn">Ungarn</a></li>
</ul>
<h5>lateinamerika</h5>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit/Argentinien">Argentinien</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Chile">Chile</a></li>
</ul>
<h5>nordamerika</h5>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit/Kanada">Kanada</a></li>
</ul>
<h5>ozeanien</h5>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit/Australien">Australien</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Neuseeland">Neuseeland (Farm)</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Neuseeland_Ranch">Neuseeland (Ranch)</a></li>
</ul>
</div>
</ul>
<div class="socialmenu">
<a class="button" href="https://www.facebook.com/auszeitweltweit/">Wir auf facebook</a>
<a class="button" href="https://www.instagram.com/auszeit_weltweit/">Wir auf Instagram</a>
</div>
</div>
</div>
css:
.wrap-nav h3 a {color: #fff!important;}
/*overlay*/
.overlay {
display: none;
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #cb0000;
opacity: 0.95;
overflow: auto;
z-index: 1000001;
}
.wrap {
color: #fff;
/* text-align:center; */
max-width: 90%;
margin: 0 auto;
}
.columnbreak {
break-inside: avoid;
}
.wrap h3 { font-size: 20px; color: #fff; text-transform: uppercase }
.wrap h5 { font-size: 17px; color: #fff; text-transform: uppercase; text-decoration: underline; }
.wrap hr {
border: dashed #fff;
border-width: 1px 0 0;
clear: both;
margin: 10px 0 10px;
height: 0;
}
.wrap ul {
margin: 0;
}
/*.wrap ul li {
margin-bottom: 0.3rem;
}*/
.wrap ul.wrap-nav {
border-bottom: 1px dashed #fff;
padding: 3rem 0 1rem;
column-count: 5;
}
.wrap-nav h2 {
display: block;
padding: 5px 0;
text-decoration: none;
color: #fff;
font-size: 2.1rem;
font-weight: bold;
}
.breiter {
width: 40%!important;
}
.wrap ul.wrap-nav li {
font-size: 20px;
display: inline-block;
vertical-align: top;
width: 18%;
position: relative;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
padding: 2px 0;
text-decoration: none;
transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
color: #fff;
}
.wrap ul.wrap-nav ul {
padding: .8rem 0;
/* border-bottom: 1px dashed #fff;
/* margin-bottom: 1.5rem; */
}
.wrap ul.wrap-nav ul li {
display: block;
font-size: 13px;
width: 77%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
}
.wrap ul.wrap-nav ul li a:hover {
color: #fff;
background: none;
text-decoration: underline;
}
.socialmenu {
text-align: center!important;
padding: 2rem 0!important;
}
.socialmenu .button {
color: #fff;
border: 1px solid #fff!important;
}
.socialmenu .button:hover {
color: #cb0000!important;
background-color: #fff;
}
@media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px dashed #fff;
}
.wrap ul.wrap-nav {
padding: 30px 0 0;
}
.wrap ul h3,
.wrap ul h5 {
color: #fff;
}
.content h3, h4, h5 {
color: #00a4e9;
}
h3.ui-accordion-header {
color: #fff;
}
}
有什么建议吗?提前致谢!
截图:
好吧,事实证明列数不是它的正确解决方案。使用了 flex-box,效果比预期的要好得多。
<div class="overlay" style="display: block;">
<div class="wrap">
<div class="btn-close"></div>
<ul class="wrap-nav">
<div class="columnbreak">
<h3>
Rundreisen </h3>
<ul class="test02">
<li class="test01"><a href="http://52.57.22.230/Rundreisen">Allgemein zu Rundreisen</a></li>
</ul>
<div class="columnbreak-inner">
<ul>
<h5>afrika</h5>
<li><a href="http://52.57.22.230/Rundreisen/Kenia">Kenia</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
</ul>
<ul>
<h5>asien</h5>
<li><a href="http://52.57.22.230/Rundreisen/China">China (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Indien">Indien (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Indonesien">Indonesien/Bali (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
<li><a href="http://52.57.22.230/Rundreisen/Nepal">Nepal (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/SriLanka">Sri Lanka (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Thailand">Thailand (ab 17)</a></li>
</ul>
<ul>
<h5>ozeanien</h5>
<li><a href="http://52.57.22.230/Rundreisen/Fidschi">Fidschi (ab 17)</a></li>
</ul>
</div>
</div>
<div class="columnbreak">
<h3>
Freiwilligenarbeit </h3>
<ul class="test02">
<li class="test01"><a href="http://52.57.22.230/Freiwilligenarbeit">Allgemein</a></li>
</ul>
<div class="columnbreak-inner">
<ul>
<h5>afrika</h5>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana">Ghana (Gastfamilie)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana-accra">Ghana (Freiwilligenhaus)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia">Kenia (Nairobi)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia-Gatanga">Kenia (Gatanga)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Madagaskar">Madagaskar</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Namibia"><span class="aktion_menu">Namibia</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Sansibar"><span class="aktion_menu">Sansibar</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika+Namibia">Südafrika + Namibia</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Tansania">Tansania</a></li>
</ul>
<ul>
<h5>asien</h5>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Bali">Bali (Indonesien, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/China">China (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Flores">Flores (Indonesien, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Indien">Indien (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Laos">Laos (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Lombok">Lombok (Indonesien, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Malaysia">Malaysia (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Nepal">Nepal (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Philippinen">Philippinen (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/SriLanka">Sri Lanka (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Thailand">Thailand (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Vietnam">Vietnam (ab 17)</a></li>
</ul>
<ul>
<h5>europa</h5>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Albanien">Albanien</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Frankreich">Frankreich</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Portugal">Portugal</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Spanien"><span class="aktion_menu">Spanien</span></a></li>
</ul>
<ul>
<h5>karibik</h5>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Dominikanische_Republik">Dominikanische Republik</a></li>
</ul>
<ul>
<h5>lateinamerika</h5>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien">Argentinien (Córdoba)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien-buenos-aires">Argentinien (Buenos Aires)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Chile">Chile</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Costa_Rica">Costa Rica (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Ecuador">Ecuador (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Peru">Peru (Cusco, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/peru-norden">Peru (Norden, ab 17)</a></li>
</ul>
<ul>
<h5>nordamerika</h5>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kanada"><span class="aktion_menu">Kanada</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/USA"><span class="aktion_menu">USA</span></a></li>
</ul>
<ul>
<h5>ozeanien</h5>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Australien"><span class="aktion_menu">Australien</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Fidschi">Fidschi (ab 17)</a></li>
</ul>
</div>
</div>
<div class="columnbreak">
<h3>
Farmarbeit </h3>
<ul class="test02">
<li class="test01"><a href="http://52.57.22.230/Farmarbeit">Allgemein zu Farmarbeit</a></li>
</ul>
<div class="columnbreak-inner">
<ul>
<h5>afrika</h5>
<li><a href="http://52.57.22.230/Farmarbeit/Namibia">Namibia</a></li>
</ul>
<ul>
<h5>europa</h5>
<li><a href="http://52.57.22.230/Farmarbeit/Frankreich">Frankreich</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Irland">Irland</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Schweiz">Schweiz (ab 16)</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Ungarn">Ungarn</a></li>
</ul>
<ul>
<h5>lateinamerika</h5>
<li><a href="http://52.57.22.230/Farmarbeit/Argentinien">Argentinien</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Chile">Chile</a></li>
</ul>
<ul>
<h5>nordamerika</h5>
<li><a href="http://52.57.22.230/Farmarbeit/Kanada">Kanada</a></li>
</ul>
<ul>
<h5>ozeanien</h5>
<li><a href="http://52.57.22.230/Farmarbeit/Australien">Australien</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Neuseeland">Neuseeland (Farm)</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Neuseeland_Ranch">Neuseeland (Ranch)</a></li>
</ul>
</div>
</div>
</ul>
<div class="socialmenu">
<a class="button" href="https://www.facebook.com/auszeitweltweit/">Wir auf facebook</a>
<a class="button" href="https://www.instagram.com/auszeit_weltweit/">Wir auf Instagram</a>
</div>
</div>
</div>
和 css:
.wrap-nav h3 a {color: #fff!important;}
/*overlay*/
.overlay {
display: none;
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #cb0000;
opacity: 0.95;
overflow: auto;
z-index: 1000001;
}
.wrap {
color: #fff;
/* text-align:center; */
max-width: 90%;
margin: 0 auto;
}
.columnbreak {
/* break-inside: avoid; */
flex-basis: 33%;
margin: 0 .5rem;
}
.columnbreak-inner {
display: flex;
flex-wrap: wrap;
}
.wrap h3 { font-size: 20px; color: #cb0000; text-transform: uppercase; background-color: #fff; }
.wrap h5 { font-size: 17px; color: #fff; text-transform: uppercase; text-decoration: underline; }
.wrap hr {
border: dashed #fff;
border-width: 1px 0 0;
clear: both;
margin: 10px 0 10px;
height: 0;
}
.wrap ul {
margin: 0;
}
/*.wrap ul li {
margin-bottom: 0.3rem;
}*/
.wrap ul.wrap-nav {
border-bottom: 1px dashed #fff;
padding: 3rem 0 1rem;
/* column-count: 5; */
display: flex;
}
.wrap-nav h2 {
display: block;
padding: 5px 0;
text-decoration: none;
color: #fff;
font-size: 2.1rem;
font-weight: bold;
}
.breiter {
width: 40%!important;
}
.wrap ul.wrap-nav li {
font-size: 20px;
display: inline-block;
vertical-align: top;
width: 18%;
position: relative;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
padding: 2px 0;
text-decoration: none;
transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
color: #fff;
}
.wrap ul.wrap-nav ul {
padding: .8rem 0;
/* border-bottom: 1px dashed #fff;
/* margin-bottom: 1.5rem; */
flex-basis: 50%
}
.wrap ul.wrap-nav ul li {
display: block;
font-size: 13px;
width: 77%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
}
.wrap ul.wrap-nav ul li a:hover {
color: #fff;
background: none;
text-decoration: underline;
}
.socialmenu {
text-align: center!important;
padding: 2rem 0!important;
}
.socialmenu .button {
color: #fff;
border: 1px solid #fff!important;
}
.socialmenu .button:hover {
color: #cb0000!important;
background-color: #fff;
}
目前我正在我的开发服务器 (http://52.57.22.230/) 上的一个新菜单上工作(单击左上角徽标正下方 "Programme" 下方)。
Chrome 的行为与其他浏览器不同。我使用 column-count: 5
作为这个大小并设置 break-inside: avoid;
以获得 5 列,但从一个主题开始。 Edge、Firefox 的行为就像我希望的那样,Chrome 仅显示 3 列。我有点明白 chrome 做了 break-inside: avoid;
所说的,但我希望在所有浏览器中都具有与 Firefox 相同的行为。
菜单html:
<div class="overlay" style="display: block;">
<div class="wrap">
<div class="btn-close"></div>
<ul class="wrap-nav">
<div class="columnbreak">
<h3>
Rundreisen </h3>
<hr>
<ul>
<li><a href="http://52.57.22.230/Rundreisen">Allgemein zu Rundreisen</a></li>
</ul>
<h5>afrika</h5>
<ul>
<li><a href="http://52.57.22.230/Rundreisen/Kenia">Kenia</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
</ul>
<h5>asien</h5>
<ul>
<li><a href="http://52.57.22.230/Rundreisen/China">China (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Indien">Indien (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Indonesien">Indonesien/Bali (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
<li><a href="http://52.57.22.230/Rundreisen/Nepal">Nepal (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/SriLanka">Sri Lanka (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Thailand">Thailand (ab 17)</a></li>
</ul>
<h5>ozeanien</h5>
<ul>
<li><a href="http://52.57.22.230/Rundreisen/Fidschi">Fidschi (ab 17)</a></li>
</ul>
</div>
<div class="columnbreak" style="">
<h3>
Freiwilligenarbeit </h3>
<hr>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit">Allgemein</a></li>
</ul>
<h5>afrika</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana">Ghana (Gastfamilie)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana-accra">Ghana (Freiwilligenhaus)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia">Kenia (Nairobi)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia-Gatanga">Kenia (Gatanga)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Madagaskar">Madagaskar</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Namibia"><span class="aktion_menu">Namibia</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Sansibar"><span class="aktion_menu">Sansibar</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika+Namibia">Südafrika + Namibia</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Tansania">Tansania</a></li>
</ul>
<h5>asien</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Bali">Bali (Indonesien, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/China">China (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Flores">Flores (Indonesien, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Indien">Indien (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Laos">Laos (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Lombok">Lombok (Indonesien, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Malaysia">Malaysia (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Nepal">Nepal (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Philippinen">Philippinen (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/SriLanka">Sri Lanka (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Thailand">Thailand (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Vietnam">Vietnam (ab 17)</a></li>
</ul>
<h5>europa</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Albanien">Albanien</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Frankreich">Frankreich</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Portugal">Portugal</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Spanien"><span class="aktion_menu">Spanien</span></a></li>
</ul>
<h5>karibik</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Dominikanische_Republik">Dominikanische Republik</a></li>
</ul>
<h5>lateinamerika</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien">Argentinien (Córdoba)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien-buenos-aires">Argentinien (Buenos Aires)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Chile">Chile</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Costa_Rica">Costa Rica (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Ecuador">Ecuador (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Peru">Peru (Cusco, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/peru-norden">Peru (Norden, ab 17)</a></li>
</ul>
<h5>nordamerika</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kanada"><span class="aktion_menu">Kanada</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/USA"><span class="aktion_menu">USA</span></a></li>
</ul>
<h5>ozeanien</h5>
<ul>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Australien"><span class="aktion_menu">Australien</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Fidschi">Fidschi (ab 17)</a></li>
</ul>
</div>
<div class="columnbreak">
<h3>
Farmarbeit </h3>
<hr>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit">Allgemein zu Farmarbeit</a></li>
</ul>
<h5>afrika</h5>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit/Namibia">Namibia</a></li>
</ul>
<h5>europa</h5>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit/Frankreich">Frankreich</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Irland">Irland</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Schweiz">Schweiz (ab 16)</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Ungarn">Ungarn</a></li>
</ul>
<h5>lateinamerika</h5>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit/Argentinien">Argentinien</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Chile">Chile</a></li>
</ul>
<h5>nordamerika</h5>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit/Kanada">Kanada</a></li>
</ul>
<h5>ozeanien</h5>
<ul>
<li><a href="http://52.57.22.230/Farmarbeit/Australien">Australien</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Neuseeland">Neuseeland (Farm)</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Neuseeland_Ranch">Neuseeland (Ranch)</a></li>
</ul>
</div>
</ul>
<div class="socialmenu">
<a class="button" href="https://www.facebook.com/auszeitweltweit/">Wir auf facebook</a>
<a class="button" href="https://www.instagram.com/auszeit_weltweit/">Wir auf Instagram</a>
</div>
</div>
</div>
css:
.wrap-nav h3 a {color: #fff!important;}
/*overlay*/
.overlay {
display: none;
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #cb0000;
opacity: 0.95;
overflow: auto;
z-index: 1000001;
}
.wrap {
color: #fff;
/* text-align:center; */
max-width: 90%;
margin: 0 auto;
}
.columnbreak {
break-inside: avoid;
}
.wrap h3 { font-size: 20px; color: #fff; text-transform: uppercase }
.wrap h5 { font-size: 17px; color: #fff; text-transform: uppercase; text-decoration: underline; }
.wrap hr {
border: dashed #fff;
border-width: 1px 0 0;
clear: both;
margin: 10px 0 10px;
height: 0;
}
.wrap ul {
margin: 0;
}
/*.wrap ul li {
margin-bottom: 0.3rem;
}*/
.wrap ul.wrap-nav {
border-bottom: 1px dashed #fff;
padding: 3rem 0 1rem;
column-count: 5;
}
.wrap-nav h2 {
display: block;
padding: 5px 0;
text-decoration: none;
color: #fff;
font-size: 2.1rem;
font-weight: bold;
}
.breiter {
width: 40%!important;
}
.wrap ul.wrap-nav li {
font-size: 20px;
display: inline-block;
vertical-align: top;
width: 18%;
position: relative;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
padding: 2px 0;
text-decoration: none;
transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
color: #fff;
}
.wrap ul.wrap-nav ul {
padding: .8rem 0;
/* border-bottom: 1px dashed #fff;
/* margin-bottom: 1.5rem; */
}
.wrap ul.wrap-nav ul li {
display: block;
font-size: 13px;
width: 77%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
}
.wrap ul.wrap-nav ul li a:hover {
color: #fff;
background: none;
text-decoration: underline;
}
.socialmenu {
text-align: center!important;
padding: 2rem 0!important;
}
.socialmenu .button {
color: #fff;
border: 1px solid #fff!important;
}
.socialmenu .button:hover {
color: #cb0000!important;
background-color: #fff;
}
@media screen and (max-width:48em) {
.wrap ul.wrap-nav>li {
width: 100%;
padding: 20px 0;
border-bottom: 1px dashed #fff;
}
.wrap ul.wrap-nav {
padding: 30px 0 0;
}
.wrap ul h3,
.wrap ul h5 {
color: #fff;
}
.content h3, h4, h5 {
color: #00a4e9;
}
h3.ui-accordion-header {
color: #fff;
}
}
有什么建议吗?提前致谢!
截图:
好吧,事实证明列数不是它的正确解决方案。使用了 flex-box,效果比预期的要好得多。
<div class="overlay" style="display: block;">
<div class="wrap">
<div class="btn-close"></div>
<ul class="wrap-nav">
<div class="columnbreak">
<h3>
Rundreisen </h3>
<ul class="test02">
<li class="test01"><a href="http://52.57.22.230/Rundreisen">Allgemein zu Rundreisen</a></li>
</ul>
<div class="columnbreak-inner">
<ul>
<h5>afrika</h5>
<li><a href="http://52.57.22.230/Rundreisen/Kenia">Kenia</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
</ul>
<ul>
<h5>asien</h5>
<li><a href="http://52.57.22.230/Rundreisen/China">China (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Indien">Indien (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Indonesien">Indonesien/Bali (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
<li><a href="http://52.57.22.230/Rundreisen/Nepal">Nepal (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/SriLanka">Sri Lanka (ab 17)</a></li>
<li><a href="http://52.57.22.230/Rundreisen/Thailand">Thailand (ab 17)</a></li>
</ul>
<ul>
<h5>ozeanien</h5>
<li><a href="http://52.57.22.230/Rundreisen/Fidschi">Fidschi (ab 17)</a></li>
</ul>
</div>
</div>
<div class="columnbreak">
<h3>
Freiwilligenarbeit </h3>
<ul class="test02">
<li class="test01"><a href="http://52.57.22.230/Freiwilligenarbeit">Allgemein</a></li>
</ul>
<div class="columnbreak-inner">
<ul>
<h5>afrika</h5>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana">Ghana (Gastfamilie)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Ghana-accra">Ghana (Freiwilligenhaus)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia">Kenia (Nairobi)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kenia-Gatanga">Kenia (Gatanga)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Madagaskar">Madagaskar</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Namibia"><span class="aktion_menu">Namibia</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Sansibar"><span class="aktion_menu">Sansibar</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika"><span class="aktion_menu">Südafrika</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Suedafrika+Namibia">Südafrika + Namibia</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Tansania">Tansania</a></li>
</ul>
<ul>
<h5>asien</h5>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Bali">Bali (Indonesien, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/China">China (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Flores">Flores (Indonesien, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Indien">Indien (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kambodscha"><span class="aktion_menu">Kambodscha (ab 17)</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Laos">Laos (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Lombok">Lombok (Indonesien, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Malaysia">Malaysia (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Nepal">Nepal (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Philippinen">Philippinen (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/SriLanka">Sri Lanka (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Thailand">Thailand (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Vietnam">Vietnam (ab 17)</a></li>
</ul>
<ul>
<h5>europa</h5>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Albanien">Albanien</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Frankreich">Frankreich</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Portugal">Portugal</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Spanien"><span class="aktion_menu">Spanien</span></a></li>
</ul>
<ul>
<h5>karibik</h5>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Dominikanische_Republik">Dominikanische Republik</a></li>
</ul>
<ul>
<h5>lateinamerika</h5>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien">Argentinien (Córdoba)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Argentinien-buenos-aires">Argentinien (Buenos Aires)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Chile">Chile</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Costa_Rica">Costa Rica (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Ecuador">Ecuador (ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Peru">Peru (Cusco, ab 17)</a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/peru-norden">Peru (Norden, ab 17)</a></li>
</ul>
<ul>
<h5>nordamerika</h5>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Kanada"><span class="aktion_menu">Kanada</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/USA"><span class="aktion_menu">USA</span></a></li>
</ul>
<ul>
<h5>ozeanien</h5>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Australien"><span class="aktion_menu">Australien</span></a></li>
<li><a href="http://52.57.22.230/Freiwilligenarbeit/Fidschi">Fidschi (ab 17)</a></li>
</ul>
</div>
</div>
<div class="columnbreak">
<h3>
Farmarbeit </h3>
<ul class="test02">
<li class="test01"><a href="http://52.57.22.230/Farmarbeit">Allgemein zu Farmarbeit</a></li>
</ul>
<div class="columnbreak-inner">
<ul>
<h5>afrika</h5>
<li><a href="http://52.57.22.230/Farmarbeit/Namibia">Namibia</a></li>
</ul>
<ul>
<h5>europa</h5>
<li><a href="http://52.57.22.230/Farmarbeit/Frankreich">Frankreich</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Irland">Irland</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Schweiz">Schweiz (ab 16)</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Ungarn">Ungarn</a></li>
</ul>
<ul>
<h5>lateinamerika</h5>
<li><a href="http://52.57.22.230/Farmarbeit/Argentinien">Argentinien</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Chile">Chile</a></li>
</ul>
<ul>
<h5>nordamerika</h5>
<li><a href="http://52.57.22.230/Farmarbeit/Kanada">Kanada</a></li>
</ul>
<ul>
<h5>ozeanien</h5>
<li><a href="http://52.57.22.230/Farmarbeit/Australien">Australien</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Neuseeland">Neuseeland (Farm)</a></li>
<li><a href="http://52.57.22.230/Farmarbeit/Neuseeland_Ranch">Neuseeland (Ranch)</a></li>
</ul>
</div>
</div>
</ul>
<div class="socialmenu">
<a class="button" href="https://www.facebook.com/auszeitweltweit/">Wir auf facebook</a>
<a class="button" href="https://www.instagram.com/auszeit_weltweit/">Wir auf Instagram</a>
</div>
</div>
</div>
和 css:
.wrap-nav h3 a {color: #fff!important;}
/*overlay*/
.overlay {
display: none;
position: fixed;
top: 0;
height: 100%;
width: 100%;
background: #cb0000;
opacity: 0.95;
overflow: auto;
z-index: 1000001;
}
.wrap {
color: #fff;
/* text-align:center; */
max-width: 90%;
margin: 0 auto;
}
.columnbreak {
/* break-inside: avoid; */
flex-basis: 33%;
margin: 0 .5rem;
}
.columnbreak-inner {
display: flex;
flex-wrap: wrap;
}
.wrap h3 { font-size: 20px; color: #cb0000; text-transform: uppercase; background-color: #fff; }
.wrap h5 { font-size: 17px; color: #fff; text-transform: uppercase; text-decoration: underline; }
.wrap hr {
border: dashed #fff;
border-width: 1px 0 0;
clear: both;
margin: 10px 0 10px;
height: 0;
}
.wrap ul {
margin: 0;
}
/*.wrap ul li {
margin-bottom: 0.3rem;
}*/
.wrap ul.wrap-nav {
border-bottom: 1px dashed #fff;
padding: 3rem 0 1rem;
/* column-count: 5; */
display: flex;
}
.wrap-nav h2 {
display: block;
padding: 5px 0;
text-decoration: none;
color: #fff;
font-size: 2.1rem;
font-weight: bold;
}
.breiter {
width: 40%!important;
}
.wrap ul.wrap-nav li {
font-size: 20px;
display: inline-block;
vertical-align: top;
width: 18%;
position: relative;
}
.wrap ul.wrap-nav li a {
color: #fff;
display: block;
padding: 2px 0;
text-decoration: none;
transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-webkit-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
color: #fff;
}
.wrap ul.wrap-nav ul {
padding: .8rem 0;
/* border-bottom: 1px dashed #fff;
/* margin-bottom: 1.5rem; */
flex-basis: 50%
}
.wrap ul.wrap-nav ul li {
display: block;
font-size: 13px;
width: 77%;
color: #e9e9e9;
}
.wrap ul.wrap-nav ul li a {
color: #fff;
}
.wrap ul.wrap-nav ul li a:hover {
color: #fff;
background: none;
text-decoration: underline;
}
.socialmenu {
text-align: center!important;
padding: 2rem 0!important;
}
.socialmenu .button {
color: #fff;
border: 1px solid #fff!important;
}
.socialmenu .button:hover {
color: #cb0000!important;
background-color: #fff;
}