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

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

我知道这并不能完全回答您的问题，但我认为您会发现这种方法更简单:)

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

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

因为容器(在本例中为 li )将增长以完美匹配图像。现在您不必设置每个按钮的宽度和高度，它们会根据图像大小增长。

为了在悬停时显示不同的图像，我将使用 css 选择器 :hover 将图像的不透明度在 0 和 1 之间更改。此外，悬停图像应从 position 编辑为 absolute，以便它可以与非悬停图像出现在同一位置。

您将需要更多地处理 css，但我建议您使用这种方法来单独设置按钮的宽度和高度。

祝你好运

编辑:

Could you possibly explain it a little bit more though, as I would like to learn, not just take spoons? :)

当然，

• 我对这个 HTML 结构所做的第一件事是在 ul 元素内嵌套一个带有 li 标记的 nav。 nav 标签不执行 div 不执行的任何操作—— it just has a better semantic name 。 ul 和 li 标签也是如此。我只是使用它们，因为您的链接代表一个 <u 排序的 l> ist 和一些 <l ist i> 项。

• 下一个要解决的问题是应用于 nav 元素的样式。特别是，我应用了三个 css 属性:

  • display: flex; : 这将显示模式设置为 flexbox。
  • align-items: center; : 这使得 flexbox 中的元素垂直居中
  • justify-content: center; :这使得 flexbox 将内部元素水平居中。 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 内的 anchor 标记，位于 nav s 内。 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>