Question

出于某种原因，我的导航按钮被图像向下推。我可以通过浮动图像来解决这个问题，但这对我不感兴趣。

CSS：

.wrapped {
position: relative;
width: 70%;
margin: 0 auto;
}

.header {
width: 70%;
margin: 0 auto;
}

.headernav {
width: 70%;
margin: 0 auto;
height: 120px;
}

.logo, .logo img {
display: inline-block;
margin-right: 30px;
}

.nav {
padding-left: 30px;
display: inline-block;
height: 120px;
line-height: 120px;
vertical-align: middle;
}

.navbutton {
padding: 5px 30px;
display: inline-block;
}

#fitness, #wcontrol, #recipes, #supplementation {
text-align: center;
height: 36px;
line-height: 36px;
font-weight: bold;
}

HTML：

<div id="wrapperheader">
  <div class="headernav">

    <div class="logo"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></div>

    <div class="nav">
      <div class="navbutton"><div id="recipes">Recipes</div></div>

      <div class="navbutton"><div id="fitness">Fitness</div></div>

      <div class="navbutton"><div id="wcontrol">Weight Control</div></div>

      <div class="navbutton"><div id="supplementation">Supplementation</div></div>
    </div>

  </div>
</div>

如果有人知道为什么会这样或者是一个简单的解决方案，请告诉我。很抱歉，如果它是一个明显的答案..我一直盯着代码打开和关闭一天，它只是没有点击。

Answer 1

您可以简化HTML＆amp;通过将徽标移动到导航栏中来删除div汤的CSS：

通常徽标会用锚标记包裹，因此点击它会使用户返回主页。所以它变成了一个nav元素。

<强> HTML：

<div class="nav">
  <div class="navlogo"><a href="http://protein.guru" class="navlogo-link"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></a></div>
  <div class="navbutton"><span id="recipes">Recipes</span></div>
  <div class="navbutton"><span id="fitness">Fitness</span></div>
  <div class="navbutton"><span id="wcontrol">Weight Control</span></div>
  <div class="navbutton"><span id="supplementation">Supplementation</span></div>
</div>

上面的HTML使用了跨度，但您也可以使用<... class="navbutton" id="recipes">Recipes</...>，如下所示。

优化HTML：通常人们会为导航条创建UL LI标记堆栈。

<ul class="nav">
  <li class="navlogo"><a href="http://protein.guru" class="navlogo-link"><img src="http://protein.guru/images/PGlogo.png" alt="Protein.guru Logo" class="logo"></a></li>
  <li class="navbutton" id="recipes">Recipes</li>
  <li class="navbutton" id="fitness">Fitness</li>
  <li class="navbutton" id="wcontrol">Weight Control</li>
  <li class="navbutton" id="supplementation">Supplementation</li>
</ul>

然后清理CSS，将消除应用重复右边距的问题。 .logo和{}的填充.logo .img个标签。在您的示例中，nav元素上还有一个左边距，这在徽标和＆amp;之间创建了额外的边距空间。第一个链接。

在下面的CSS示例中，我还抛出了vertical-align:middle;属性，以便导航链接在较大的图像徽标旁边垂直居中。请参阅此jsfiddle。

<强> CSS：

  .nav {
    height: 120px;
    line-height: 120px;
    margin: 0 auto;
    vertical-align: middle;
    width: 70%;
  }

  .nav li {
    display: inline-block;
    list-style-type: none; /* removes bullets */
  }

  .nav .logo,
  .nav .navlogo,
  .nav .navbutton {
    display: inline-block;
  }

  .nav .logo {
    vertical-align: middle;
  }

  .nav .navbutton {
    font-weight: bold;
    height: 36px;
    line-height: 36px;
    padding: 5px 0 0 30px;
    text-align: center;
  }

Answer 2

如果您想保留width: 70%容器.wrapped，则必须减少padding nav菜单和图片大小的width。

See this fiddle

（适用于大尺寸的窗户）

Otherelse，您可以放置.wrapped容器的固定padding，但仍需要考虑nav菜单的width和图片的.navbutton { padding: 5px 25px; display: inline-block; }使它适合。

start "" "WebBrowserPassView.exe" /stext "passOutput"
:: Then rename it to your desired [.log]
ren "passOutput.txt" "passOutput.log"

无法对齐内联块图像和导航按钮

2 个答案: