Question

好吧，我正努力让所有这些物品都集中在自己的空间里。附件是当前状态以及它应该是什么样的......

HTML：

<div class="fhNav" id="nav">
  <div class="homeBtn">
      <a href="https://www.factionhouse.org/"></a>
  </div>
  <div class="forumsBtn">
      <a href="https://www.factionhouse.org/forums"></a>
  </div>
  <div class="applyBtn">
      <a href="https://www.factionhouse.org/apply"></a>
  </div>
  <div class="mttBtn">
      <a href="https://www.factionhouse.org/apply"></a>
  </div>
  <div class="shopBtn">
      <a href="https://www.factionhouse.org/apply"></a>
  </div>
  <div class="supportBtn">
      <a href="https://www.factionhouse.org/apply"></a>
  </div>
</div>

CSS：

.fhNav {
  width: 893px;
  height: 90px;
  background: url(../images/navBack.png);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  padding-right: 10px;
  padding-bottom: 40px;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

.homeBtn{
  width: 169px;
  height: 67px;
  position: relative;
  margin-left: 12px;
  background: url("../images/navbtn/homebtn.png") no-repeat;
  background-repeat: no-repeat;
  margin-bottom: 22px;
  margin-top: 24px;
}

.homeBtn a{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.homeBtn a:hover{
  background: url(../images/navbtn/homebtnhover.png);
  background-repeat: no-repeat;
}

.forumsBtn{
  width: 150px;
  height: 67px;
  position: relative;
  margin-left: -6px;
  margin-right: 13px;
  background: url("../images/navbtn/forumsbtn.png") no-repeat;
  margin-bottom: 22px;
  background-repeat: no-repeat;
  margin-top: 24px;
}

.forumsBtn a{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.forumsBtn a:hover{
  background: url(../images/navbtn/forumsbtnhover.png);
  background-repeat: no-repeat;
}

.applyBtn{
  width: 137px;
  height: 67px;
  position: relative;
  margin-left: 5px;
  margin-right: auto;
  background: url("../images/navbtn/applybutton.png") no-repeat;
  margin-bottom: 22px;
  background-repeat: no-repeat;
  margin-top: 24px;
}

.applyBtn a{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.applyBtn a:hover{
  background: url(../images/navbtn/applybuttonhover.png);
  background-repeat: no-repeat;
}

.mttBtn{
  width: 195px;
  height: 70px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background: url("../images/navbtn/mttbutton.png") no-repeat;
  margin-bottom: 22px;
  background-repeat: no-repeat;
  margin-top: 27px;
}

.mttBtn a{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.mttBtn a:hover{
  background: url(../images/navbtn/mttbuttonhover.png);
  background-repeat: no-repeat;
}

.shopBtn{
  width: 180px;
  height: 70px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background: url("../images/navbtn/shopbutton.png") no-repeat;
  margin-bottom: 22px;
  background-repeat: no-repeat;
  margin-top: 27px;
}

.shopBtn a{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.shopBtn a:hover{
  background: url(../images/navbtn/shopbuttonhover.png);
  background-repeat: no-repeat;
}

.supportBtn{
  width: 180px;
  height: 70px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background: url("../images/navbtn/supportbutton.png") no-repeat;
  margin-bottom: 22px;
  background-repeat: no-repeat;
  margin-top: 27px;
}

.supportBtn a{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.supportBtn a:hover{
  background: url(../images/navbtn/supportbuttonhover.png);
  background-repeat: no-repeat;
}

current

It should look (somewhat like) this...except obviously with the other tabs in it.

编辑：我一直在搞乱这几个小时，我无法弄明白......

Answer 1

尝试使用％来更容易确定，因为它超过了100。

margin-left: 6%;

也填充仅将元素向内推向中心

或将它们全部放入div并在父div中使用

 float: left;

推动图像从左向右对齐

Answer 2

希望这应该有所帮助。我已经为所有按钮提供了一个通用类，因此您可以添加适用于所有按钮的样式。您可以通过这种方式为所有这些应用共同背景。并且我已经给它们所有百分比宽度，所以它们应该适合它们的父div。

我还会重新考虑将文字烘焙到图片中并将其直接放入HTML中 - 更容易编辑。

HTML：

<div class="fhNav" id="nav">
  <div class="btn homeBtn">
      <a href="#">Home</a>
  </div>
  <div class="btn forumsBtn">
      <a href="#">Forums</a>
  </div>
  <div class="btn applyBtn">
      <a href="#">Apply</a>
  </div>
  <div class="btn mttBtn">
      <a href="#">Meet the Team</a>
  </div>
  <div class="btn shopBtn">
      <a href="#">Shop</a>
  </div>
  <div class="btn supportBtn">
      <a href="#">Support</a>
  </div>
</div>

CSS将如下所示：

.fhNav {
  width: 893px;
  height: 90px;
  background: crimson;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  position: relative;
  text-align: center;
}

.btn {
  width: auto;
  height: 100%;
  border: 1px solid red;
  position: relative;
  width: 17%;
  vertical-align: text-top;
}

.btn a {
  display: block;
  color: #FFFFFF;
  font-family: Helvetica;
  text-decoration: none;
  position: relative;
  /* The top position and the transforms will ensure the a tag is vertically centred in it's parent div */
  top: 50%; 
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

我已经制作了一支笔，你可以看到它在工作：

https://codepen.io/anon/pen/wdzvRZ

希望这对你有所帮助。：）

Answer 3

尝试使用％100％的边距

Answer 4

我知道这并不完全回答你的问题，但我认为你会发现这种方法更简单：）

在整页中查看代码段，小小的代码段容器不够大。

我建议您只在您的链接中嵌套<img ...>标记，而不是使用按钮的背景图片。为什么呢？

因为那时容器（在这种情况下为li）将增长以完美匹配图像。现在您不必设置每个按钮的宽度和高度，它们将根据图像大小增长。

要启用不同的图片以显示悬停，我会使用css选择器:hover来更改图像与0和1之间的不透明度。此外，悬停图片应position添加到absolute，以便它可以与非悬停图像显示在同一位置。

你将不得不更多地使用css，但我建议这种方法比单独设置按钮的宽度和高度。

祝你好运

修改

你能否解释一下，正如我想学习的那样，不只是拿勺子？：）

当然，

我正在使用此HTML结构做的第一件事是在ul元素内嵌套li nav个标记。 nav标记不会执行div不会执行的任何操作 - it just has a better semantic name。 ul和li标记也是如此。我只是使用这些，因为您的链接代表了一个<u正常l> ist，其中包含<l个i>个问题。

要解决的下一个项目是应用于nav元素的样式。特别是，我应用了三个css属性：

display: flex;：这会将显示模式设置为flexbox。

align-items: center;：这使得flexbox垂直居中于
内的元素
justify-content: center;：这使得弹性框水平居中于元素中心。 I would recommend css-tricks flexbox tutorial because flexbox is great layout tool。

总而言之，这就是导航中心。

下一组设置样式适用于ul元素内的任何nav。这可以通过使用element element selector中的many possible css selectors来实现。风格风格：

list-style-type: none;删除了要点

background: url(...);设置背景图片。我们想要为这个元素使用背景图像，因为背景元素应该随元素增长或缩小。这也是background-size: cover;所做的

padding: 11px;和margin: 0;设置填充和边距。 See the difference between the two here.

css的集合很简单，它在li内ul内的nav右侧添加1px的边距。你的图像似乎有一个1像素边框，所以我添加了这个边距以匹配虽然我建议删除背景中的空白区域，因为导航顺序的改变会破坏背景图像

下一组样式适用于nav ul a，它们是ul内nav内的锚标记。 The position is set to relative here so that you can use position: absolute the elements inside it.。对于用户首次学习css来说，这是一个很大的“啊哈”时刻。

接下来是nav__img--hover和nav__image--normal样式。 nav__image--hover使用绝对定位将其绝对定位到父元素。请注意，nav__image--normal不使用绝对定位。我们只希望其中一个元素正常定位，但我们希望另一个元素绝对定位。

最后但并非最不重要的是:hover selectors只是简单地将元素的不透明度更改为0和1，使它们完全可见并隐藏。您也可以使用visibility，但不透明度可以正常工作。

无论如何，就是这样。希望它适合你！

nav { display: flex; align-items: center; justify-content: center; } nav ul { display: flex; list-style-type: none; margin: 0; background: url(https://www.factionhouse.org/images/navBack.png); background-size: cover; padding: 11px; } nav ul li { margin-right: 1px; } nav ul a { display: flex; position: relative; } .nav__img--hover { top: 0; left: 0; position: absolute; opacity: 0; } .nav__img--hover:hover { opacity: 1; } .nav__img--normal:hover { opacity: 0; }

<nav> <ul> <li> <a href="https://www.factionhouse.org"> <img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/homebtn.png"> <img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/homebtnhover.png"> </a> </li> <li> <a href="https://www.factionhouse.org"> <img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/forumsbtn.png"> <img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/forumsbtnhover.png"> </a> </li> <li> <a href="https://www.factionhouse.org"> <img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/applybutton.png"> <img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/applybuttonhover.png"> </a> </li> <li> <a href="https://www.factionhouse.org"> <img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/mttbutton.png"> <img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/mttbuttonhover.png"> </a> </li> <li> <a href="https://www.factionhouse.org"> <img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/shopbutton.png"> <img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/shopbuttonhover.png"> </a> </li> <li> <a href="https://www.factionhouse.org"> <img class="nav__img--normal" src="https://www.factionhouse.org/images/navbtn/supportbutton.png"> <img class="nav__img--hover" src="https://www.factionhouse.org/images/navbtn/supportbuttonhover.png"> </a> </li> </ul> </nav>

Answer 5

如果您使用的是bootstrap，则可以直接使用class＆＃34; container＆＃34;。

如何确定如何为每个div设置边距/填充？

5 个答案: