html - 显示问题div里面的元素
问题描述
我正在为我的网站创建页脚。我遇到的问题似乎很平庸,也许不是。在“footer”元素内部是一个“ul”列表,在它们内部是“li”,带有指向社交媒体的链接。Chrome 浏览器不显示这些元素,类似于 Opera 和 Mozilla。问题出在哪里?我的想法不多了。
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Lato', 'Josefin Sans', sans-serif;
font-size: 0;
}
.navbar {
font-size: 18px;
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
}
.nav-links,
.logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
vertical-align: middle;
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.main-nav {
list-style-type: none;
display: none;
}
.active {
display: block;
}
.background-image img {
height: 100%;
width: 100%;
}
.container {
display: flex;
height: 250px;
}
.column-left {
width: 33.333%;
background: #f2f2f2;
border: 1px solid #e6e6e6;
}
.column-center {
width: 33.333%;
background: #f2f2f2;
border: 1px solid #e6e6e6;
}
.column-right {
width: 33.333%;
background: #f2f2f2;
border: 1px solid #e6e6e6;
}
.container .column-left {
text-align: center;
padding-top: 20px;
font-size: 20px;
}
h2 {
font-size: 23px;
padding: 15px;
}
p {
font-size: 20px;
padding: 15px;
}
.container .column-center {
text-align: center;
padding-top: 20px;
font-size: 20px;
}
.container .column-right {
text-align: center;
padding-top: 20px;
font-size: 20px;
}
@media screen and (min-width: 600px) {
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
margin: 0;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0;
}
.navbar-toggle {
display: none;
}
.logo:hover,
.nav-links:hover {
color: rgba(255, 255, 255, 1);
}
}
@media screen and (max-width: 599px) {
h2.title {
font-size: 15px;
}
p {
font-size: 13px;
}
}
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/8a84b6b9df.js"></script>
<div>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
<a href="https://delightcaptures.com" class="logo"><img src="img/developer.png" alt="Sebastian Falba" width="50"></a>
<ul class="main-nav" id="js-menu">
<li>
<a href="#" class="nav-links">Home</a>
</li>
<li>
<a href="#" class="nav-links">About me</a>
</li>
<li>
<a href="#" class="nav-links">Projects</a>
</li>
<li>
<a href="#" class="nav-links">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="background-image">
<img src="img/responsive.jpg" alt="web development">
</div>
<div class="container">
<div class="column-left"><i class="fas fa-keyboard fa-3x"></i>
<h2 class="title">Modern design</h2>
<p class="description">Fantastic Clean Website Designs</p>
</div>
<div class="column-center"><i class="far fa-window-maximize fa-3x"></i>
<h2 class="title">Responsive</h2>
<p class="description">Make your website mobile-friendly</p>
</div>
<div class="column-right"><i class="fas fa-laptop-code fa-3x"></i>
<h2 class="title">Quality code</h2>
<p class="description">Coding best practices are a set of my rules</p>
</div>
</div>
<footer>
<ul>
<li><a href="https://twitter.com/sebastian_falba">Footer</a></li>
</ul>
</footer>
解决方案
您将 设置font-size
为0
使文本没有高度。
由于文字没有<a>
高度,所以没有高度,所以<li>
没有高度,所以<ul>
没有高度,到<footer>
没有高度,所以你看不到它。
推荐阅读
- c# - .NET 核心中的 RSA 加密(与 .Net Framework 的区别)
- r - 如何整合来自不同日期的两个数据集的数据?
- reactjs - 尝试递归呈现评论 ReactJs
- python - 尝试用任意曲线拟合 Python 中的多个 Moyal 函数
- javascript - history.back() 在同一域上导航时不起作用?
- c# - C# dotnet SslStream 信任库
- node.js - 在 Vue 应用程序中管理 passportjs Google-Strategy
- ios - 带有 UICollectionViewCompositionalLayout 的单行水平 UICollectionView 的不完整删除动画
- coq - 如何正式写声明?
- python - 如何将列表转换为嵌套的 json