Question

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

请在纠正代码时，说明背后的原因。它会有很大的帮助。感谢

显示的社交网络图标也是黑色，悬停效果使其呈现红色。它是一个图像还是只能在css的帮助下实现？

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

容器宽度的浮动和百分比是一个很好的方法，特别是如果你不能拥有一个固定宽度的容器。不要忘记调整字体大小，以确保文本不会膨胀其容器的大小并保持在一行。此外，为此，您只需要在“li”元素本身上使用浮点数。永远不要忘记清除浮动（提供clearfix类）。

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 2

将固定宽度指定为.navbar ul li，例如

.navbar ul li {
  width: 120px;
}

（尝试使用不同的值）

Answer 3

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

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

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

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;

}

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

4 个答案: