如何在导航栏中创建相等的空间？答案

【问题标题】：how to create equal spaces in the navigation bar?如何在导航栏中创建相等的空间？
【发布时间】：2016-10-19 20:16:01
【问题描述】：

我想让我的导航栏看起来像这样http://www.templatemonster.com/demo/51347.html

请在更正代码时说明其背后的原因。这将有很大帮助。谢谢

显示的社交网络图标也为黑色，悬停效果使其变为红色。它是图像还是可以仅在 css 的帮助下实现的？

body {
  background:gray;
  /*border: 2px solid yellow;*/
}

.headwrap {
  width: 93%;
  height: auto;
  margin: auto;
  padding-top: 70px;
}

.logo {
  margin: 0;
  float: left;
}

.socialbuttons {
  float: right;
}

.socialbuttons ul {
  list-style: none;
  float: right;
}

.socialbuttons ul li {
  display: inline;
  padding-left: 20px;
}

.navbar {
  margin-top: 40px;
  width: 100%;
  background: #db3636;
  float: left;
}

.navbar ul {
  list-style: none;
  margin: 0;
  float: left;
  padding: 30px 15px;
}

.navbar ul li {
  display: inline;
  padding: 15px;
  border-right: 2px solid black;
  color: white;
  font-weight: bold;
  font-family: sans-serif;
}

<!DOCTYPE html>
<html>
<head>
  <title>Industrial Website demo</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial scale=1.0">
  <link href="damion.css" rel="stylesheet" type="text/css">
</head>
<body>
  <header class="headwrap">
    <div class="logo">
      <img src="logo.png" alt="Damion max">
    </div>
    <div class="socialbuttons">
      <ul>
        <li><img src="facebook.png"</li>
        <li><img src="twitter.png"</li>
        <li><img src="feed.png"</li>
        <li><img src="google.png"</li>
      </ul>
    </div>
    <nav class="navbar">
      <ul>
        <li>ABOUT US</li>
        <li>GALLERY</li>
	    <li>EVENTS</li>
        <li>BLOG</li>
        <li>CONTACTS</li>
      </ul>
    </nav>
  </header>
</body>
</html>

【问题讨论】：

??你能澄清你的问题或至少链接2个不相同的图像吗？
我想让导航栏像链接中的templatemonster.com/demo/51347.html
请看一下，我已经修改了

标签： html css navigation

【解决方案1】：

容器宽度的浮动和百分比是一个不错的选择，尤其是在您负担不起固定宽度容器的情况下。不要忘记调整字体大小，以确保文本不会膨胀它的容器大小并保持在单行上。此外，要使其正常工作，您只需要在“li”元素本身上浮动。并且永远不要忘记清除浮动（提供 clearfix 类）。

附：不使用“box-sizing:border-box;”会更难实现，这里有一篇好文章about box-sizing css property

代码：

 <header class="headwrap">

  <nav class="navbar">
    <ul class="clearfix">
      <li>ABOUT US</li>
      <li>GALLERY</li>
      <li>EVENTS</li>
      <li>BLOG</li>
      <li>CONTACTS</li>
    </ul>
  </nav>

</header>

* {
/* Very important part, set on all elements for simplicity.  */
  box-sizing: border-box;
}

body {
    background:gray;
    /*border: 2px solid yellow;*/
}

.headwrap {
    width: 93%;
    height: auto;
    margin: auto;
    padding-top: 70px;
}

.navbar {
    margin-top: 40px;
    width: 100%;
    background: #db3636;
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 15px; 
}

.navbar ul li {
  /* float it to have no issues with whitespace between inline-blocks */
    float: left;
    padding: 15px;
  /* borders from both sides */
    border-right: 1px solid black;
    border-left: 1px solid black;
    color: white;
  font-size: 14px;
    font-weight: bold;
    font-family: sans-serif;

  text-align: center;
  /* total width 100% / 5 elements */
  width: 20%;
}

/* No left border for the first one */
.navbar ul li:first-child {
  border-left: none;
}

/* No right border for the last one */
.navbar ul li:last-child {
  border-right: none;
}

/* Helps with floats inside */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

.clearfix:after {
  clear: both;
}

About clearfix

这是fiddle

【讨论】：

谢谢 :) 以及如何更改以使边框覆盖菜单栏的整个高度？
请告诉我如何在不影响相等空间的情况下添加主页和搜索栏。无法这样做。

【解决方案2】：

给.navbar ul li分配一个固定宽度，比如

.navbar ul li {
  width: 120px;
}

（尝试不同的值）

【讨论】：

【解决方案3】：

您好，这是我的第一个回复。我创建了这个JS Fiddle 来向您展示如何做到这一点。只需单击包含所有源代码的工作示例的链接，然后将屏幕的演示部分拖得更宽以适应所有内容 - 此模板很容易使移动设备友好，但作为指南，您应该始终开始为 320px 而不是 1024+ 进行设计

希望这会有所帮助 - 如果您喜欢我的回答，请接受我的回答...这也是我的第一篇文章 :-)

请注意，以下 css 是为了确保所有元素在其指定的宽度和高度中都包含填充和边框，因此使用填充/边框不会增加它们的总大小。谷歌'css box sizing'了解更多信息

body {
background-color: #ccc;
margin: 0;
padding: 30px 0 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

*, *:before, *:after{
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;}

【讨论】：

【解决方案4】：

悬停效果只能通过 CSS 实现。试试这个

.socialbuttons ul li:hover {
    background: #cb3529;
}

和过渡效果

.socialbuttons li img {
transition: all 0.3s ease 0s;

}

【讨论】：

我无法在社交按钮上获取圆圈背景。我应该把代码放在哪里？然后很容易实现悬停效果。
嘿...如果您想复制任何效果或设计，请尝试使用相应浏览器中的开发人员工具。（我更喜欢 Chrome）并且您必须将背景颜色添加到“li” css中的元素并使背景半径：50％；或 50 像素；
但由于我在社交按钮上提供的填充，它被拉长了
把小提琴链接发给我。
chatstep.com/#test 来到这个聊天室并输入你自己的昵称..不要更改房间名称。我们可以在那里交谈。因为我明白你是个新手..所以想帮助你更多。