[英]I can't figure out why my clearfix isnt working
我不知道為什么我的明確修復無法正常工作。 我將帶有一類main-nav的nav ul浮動到右側，並且標題折疊了一些。
我的clearfix就在CSS的頁腳樣式上方。
.clearfix::after {
content="";
display: table;
clear: both;
}
您的代碼可以正常工作，只需將content=""更改為content:""
.clearfix::after {
content:"";
display: table;
clear: both;
}
片段：
body { max-width: 100%; padding: 0; margin: auto; } .main-layout { min-height: calc(100vh - 20px); } header { background-color: orange; max-width: 100%; padding: 1px; margin: auto; } .main-title { padding: 3% 5% 0; margin: 0; } .main-nav { max-width: 100%; padding: 0; margin: auto; } .main-nav li { font-size: 1.5rem; list-style: none; position: relative; max-width: 100%; padding: 0; margin: auto; } .sub-nav { width: 100%; background-color: white; position: absolute; z-index: 1; display: none; max-width: 100%; padding: 0; margin: auto; } .sub-nav li { max-width: 100%; padding: 0; margin: auto; } .main-nav li:hover .sub-nav { display: block; } section { max-width: 100%; padding: 0; margin: auto; } .clearfix::after { content: ""; display: table; clear: both; } footer { height: 20px; max-width: 100%; padding: 0; margin: auto; } @media screen and (min-width: 450px) { .main-nav { margin: 0 5%; float: right; } .main-nav li { padding: 5px; float: left; } }
<body> <div class="main-layout"> <header class="clearfix"> <h1 class="main-title">This Is a Test</h1> <nav class="clearfix"> <ul class="main-nav"> <li><a href="index.html">Home</a> </li> <li> <span>Content1</span> <ul class="sub-nav"> <li><a href="page1.html">Page 1</a> </li> <li><a href="page2.html">Page 2</a> </li> <li><a href="page3.html">Page 3</a> </li> </ul> </li> <li> <span>Content2</span> <ul class="sub-nav"> <li><a href="page4.html">Page 4</a> </li> <li><a href="page5.html">Page 5</a> </li> <li><a href="page6.html">Page 6</a> </li> </ul> </li> <li> <span>Content3</span> <ul class="sub-nav"> <li><a href="page7.html">Page 7</a> </li> <li><a href="page8.html">Page 8</a> </li> <li><a href="page9.html">Page 9</a> </li> </ul> </li> </ul> </nav> </header> <section> </section> </div> <footer> <span>Footer Content</span> </footer> </body>
我無法弄清楚為什么我添加事件處理程序的簡單嘗試無效
[英]I can't figure out why my simple attempt at adding an event handler isn't working
經典的元音練習。 我不知道為什么我的for循環無法正常工作
[英]classic vowel exercise. I can't figure out why my for loop isn't working
我的導航欄“位置問題”已停止工作，我不知道為什么
[英]My navbar “position sticky” has stopped working and I can't figure out why
我的 javascript 驗證剛剛停止工作，我不知道為什么
[英]My javascript validation just stopped working and I can't figure out why
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.