嘿,我刚开始在工作中学习 HTML。所以,我开始为一家假公司制作网站。我制作了一个带有 Logo 的导航和一个侧面导航。 但只有页脚我遇到了问题,因为它不是连续的。
HTML代码:
<div id="footer">
<ul class="footer">
<li class="fuss"><a href="#">AGB</a></li>
<li class="fuss"><a href="#">Impressum</a></li>
<div class="wortmarke">
Café Villa Bernstein
<p class="copyright">
© Café Villa Bernstein. All rights reserved.
</p>
</div>
<li class="fuss"><a href="#">Datenschutz</a></li>
<li class="fuss"><a href="#">Pressenews</a></li>
</ul>
</div>
CSS:
/* Footer */
ul.footer {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
li.fuss {
float: left;
width: 10%
}
li.fuss a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.wortmarke {
color: #ffc995;
font-size: 150%;
text-align: center;
width: 40%;
}
p.copyright {
font-size: 40%;
margin: -4%;
color: white;
}
如您所见,我有 4 个链接(AGB、Impressum、Datenschutz 和 Pressenews),在 Impressum 和 Datenschutz 之间我想添加 Logo 文本“Café Villa Bernstein”和下面的“© Café Villa Bernstein。保留所有权利。” .问题是当我连续删除“ Logo 文本”时。 当我添加“ Logo 文本”时 - 2 个链接“Datenschutz”和“Pressenews”跳转到下一行
现在只有一件小事我忘了问。我想要两个链接(AGB & Impressum 和 Datenschutz & Pressenews)之间的白色边框。当我在 Datenschutz 的左侧添加 border-right: 1px solid white
时,缺少白色边框。所以,我添加了 border left: 1px solid white
。但随后 AGB & Impressum 和 Datenschutz & Pressenews 之间的界限越来越宽。我现在的问题是:我如何在所有元素之间获得相同的边框
最佳答案
我所做的是:
li.fuss {
float: left;
width: 15%
}
现在所有的 li 和中间的 div 可以“覆盖”整个页脚(4*15% + 40% = 100% 宽度)。
我还在 .wortmarke 中添加了 float:left :
.wortmarke {
color: #ffc995;
font-size: 150%;
text-align: center;
width: 40%;
display:inline-block;
float:left;
}
这样它将与其余的 li 一起 float 。
最后,完全删除这个 block :
ul li:nth-child(4), ul li:nth-child(5) {
float:right;
margin-right: 20px;
}
因为它是不必要的,无响应且不支持跨浏览器兼容性
关于CSS |带有 Logo 的页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36055121/