CSS |带有徽标的页脚

Question

嘿，我刚开始在工作中学习 HTML。所以，我开始制作一个假网站 Company.I 制作了带有徽标的导航和侧面导航。但是只有页脚我遇到了问题，因为它不是连续的。

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&eacute; Villa Bernstein
      <p class="copyright">
        &copy; Caf&eacute; 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 之间我想添加徽标文本 "Café Villa Bernstein" 及以下“© Café Villa Bernstein。保留所有权利”。问题是当我连续删除 "Logo Text" 时。当我添加 "Logo Text" - 2 个链接 "Datenschutz" 和 "Pressenews" 跳转到下一行

Here you can see my Problem

现在只有一件小事忘了问。我想要两个链接（AGB & Impressum 和 Datenschutz & Pressenews）之间的白色边框。当我在 Datenschutz 的左侧添加 border-right: 1px solid white 时，缺少白色边框。所以，我添加 border left: 1px solid white。但随后 AGB & Impressum 和 Datenschutz & Pressenews 之间的界限越来越宽。我现在的问题是：如何在所有元素之间获得相同的边框

Fat Border between 2 Navigation

Answer 1

首先在列表中使用 DIV 不是一个好主意。但我只是稍微更正了你的代码，并会解释为什么它会这样。

你的问题是 div 标签默认是 display: block; 而列表是 display:inline; 这意味着 div 想要整行，这就是为什么 "Datenschutz and Pressenews" 被移走。

您需要将显示样式更改为inline-block;并添加一个float:right "Datenschutz and Pressenews".

查看工作 Fiddle

Answer 2

我做的是：

li.fuss {
  float: left;
  width: 15%
}

现在所有 li 和中间 div 可以 'cover' 整个页脚 (4* 15% + 40% = 100% 宽度）。

我还在 .wortmarke 中添加了 float:left :

.wortmarke {
  color: #ffc995;
  font-size: 150%;
  text-align: center;
  width: 40%; 
  display:inline-block;
  float:left;
}

这样它将与 li 的其余部分一起浮动。

最后，完全删除此块：

ul li:nth-child(4), ul li:nth-child(5) {
  float:right;
  margin-right: 20px;
}

因为它是不必要的、无响应且不支持跨浏览器兼容性

CSS |带有徽标的页脚

CSS | Footer with Logo

css

footer