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

Question

我想让我的导航栏看起来像这样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>

Answer 1

给.navbar ul li分配一个固定的宽度，喜欢

.navbar ul li {
  width: 120px;
}

（尝试不同的值）

Answer 2

容器宽度的浮点数和百分比是一个很好的方法，尤其是当您负担不起固定宽度的容器时。不要忘记调整字体大小，以确保文本不会膨胀它的容器大小并保持在一行中。此外，要使其正常工作，您只需要在 "li" 元素本身上浮动即可。永远不要忘记清除浮动（clearfix class 提供）。

P.S。如果不使用 "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

Answer 3

嗨，这是我的第一条回复。我创建此 JS Fiddle 是为了向您展示如何操作。只需单击 link 即可获得包含所有来源的工作示例，并将屏幕的演示部分拖动得更宽以适合所有内容 - 此模板很容易使移动设备友好，但作为指南，您应该始终开始设计320px 不是 1024+

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

请注意，css 是为了确保所有元素都在其指定的宽度和高度中包含填充和边框，因此使用 padding/borders 不会增加它们的总大小。 Google '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;}

Answer 4

悬停效果只能用CSS来实现。试试这个

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

和过渡效果

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

}

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

how to create equal spaces in the navigation bar?

html

css

navigation