Question

嘿，我刚刚开始在工作中学习HTML。所以，我开始为假公司制作一个网站。我用Logo和Side导航进行了导航。但只有Footer我遇到了问题，导致它没有连续。

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之间，我想添加Logo Text“CaféVillaBernstein”和“©CaféVillaBernstein。保留所有权利。” 。问题是当我将“徽标文本”全部删除时。当我添加“徽标文本” - 2个链接“Datenschutz”和“Pressenews”跳转到下一行

Here you can see my Problem

现在只有一件小事我忘了问。我希望2个链接之间有白色边框（AGB＆amp; Impressum和Datenschutz＆amp; Pressenews）。当我在Datenschutz的左侧添加border-right: 1px solid white时，缺少一个白色边框。所以，我添加border left: 1px solid white。但随后AGB和AGB之间的边界Impressum和Datenschutz＆amp; Pressenews正在变胖。我现在的问题是：我如何在所有元素之间获得相同的边界

Fat Border between 2 Navigation

Answer 1

我做的是：

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

现在所有 li 和中间 div 都可以覆盖＆＃39;整个页脚（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;
}

因为它是不必要的，没有响应，并且不支持跨浏览器兼容性

Answer 2

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

你的问题是div标签默认为display: block;，list是display:inline;，这意味着div想要整行，这就是为什么“Datenschutz和Pressenews”被移走了。

您需要将显示样式更改为inline-block;并添加float:right “Datenschutz和Pressenews”。

见工作Fiddle

CSS |页脚与徽标

2 个答案: