如何确定如何设置每个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;
}

当前

它应该看起来(有点像) this...except，显然其中还有其他选项卡。

编辑:我已经搞了几个小时了，我就是搞不懂.

Answer 1

我知道这并不能完全回答你的问题，但我想你会发现这个方法更简单:)

在完整页面中查看片段，小片段容器不够大。

与其使用按钮的背景图像，我建议在链接中嵌套一个<img ...>标记。为什么？

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

为了使不同的图像在悬停上显示，我将使用css选择器:hover来更改图像在0和1之间的不透明度。另外，悬停图像应该被position编辑成absolute，这样它就可以出现在与非悬停图像相同的位置。

您将不得不更多地处理css，但我建议您采用这种方法，而不是单独设置按钮的宽度和高度。

祝你好运

编辑：

你能不能解释得更多一点，因为我想学习，而不只是拿勺子？)

好的,

• 对于这个HTML结构，我要做的第一件事是在一个ul元素中嵌套一个带有li标记的nav。nav标记不会做div不做的任何事情--它只是有一个更好的语义名称。ul和li标记也是如此。我只是使用这些，因为您的链接代表了一个<u赋范的l>ist和一些<listi>tems。
• 要处理的下一项是应用于nav元素的样式。特别是，我应用了三个css属性：

- `display: flex;`: this sets the display mode to flexbox.
- `align-items: center;`: this make the flexbox vertically center the elements inside
- `justify-content: center;`: this makes the flexbox horizontally center the elements inside. [I would recommend css-tricks flexbox tutorial because flexbox is great layout tool](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

总之，这个中心就是导航。

• 下一组样式适用于nav元素内的任何nav。这是通过在元素选择器之外使用许多可能的css选择器来实现的。风格风格：
  • list-style-type: none;移除子弹点
  • background: url(...);设置背景图像。我们希望为这个元素使用背景图像，因为背景元素应该与元素一起增长或缩小。这也是background-size: cover;所做的
  • padding: 11px;和margin: 0;设置填充和边距。看看这两者的不同之处。

​

• css的集合很简单，它在li内部的ul内部的nav中向右增加了1px的空白。您的图像似乎有1 px边框，所以我添加了这个边距以匹配，不过我建议删除背景中的空白，因为导航顺序的更改会破坏背景图像。
• 下一组样式应用于nav ul a，它是navs. 里面的元素。中的ul中的锚标记。对于第一次学习css的用户来说，这是一个很大的“啊哈”时刻。
• 接下来是nav__img--hover和nav__image--normal风格。nav__image--hover使用绝对定位将其绝对定位到父元素。注意，nav__image--normal没有使用绝对定位。我们只想在其中一个元素的位置正常，但我们希望另一个是绝对的位置。
• 最后但并非最不重要的是，有一个选择器，它简单地改变了元素与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 2

尝试使用%使其更容易确定，因为它从100中出来。

margin-left: 6%;

此外，填充只会将内部的元素推向中心。

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

 float: left;

将图像从左向右排列

Answer 3

希望这能帮上忙。我给你所有的按钮一个普通的类，这样你就可以添加适用于所有按钮的样式了。您可以通过这种方式对所有这些人应用共同的背景。我给了他们一个百分比的宽度，所以他们应该适合他们的父母。

我还会重新考虑将文本烘焙到图像中，并将其直接放入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

希望这对你有一点帮助。:)