Question

我想在弹性框上调整顶部和底部填充，但更改不会显示在浏览器中。我认为问题在于以下规则之一：

.logo
{
  width: 10%;

  display: inline-flex;
}

.nav
{
  display: flex;

  align-items: center;

  background-color: rgba(0, 0, 0, 0.05);

  margin-bottom: 10%;
}

.link-reg
{
  color: black;

  display: inline-block;

  margin-right: 3%;

  text-decoration: none;

  transition: all .2s ease-in;

  background-color: white;

  padding: 1% 2% 1% 2%;

  border-radius: 15em;
}
.link-reg:hover
{
  background-color: rgba(255, 255, 255, 0.7);
}

填充在第54行设置。小提琴可用here。谢谢！

注意： 我知道有一个像这样的问题，但它不清楚，不包含任何解释，我不喜欢所示的解决方案。

Answer 1

在弹性项目上使用百分比时长Firefox had a bug report，显然可以通过两种方式解释规则here in Michael's answer

解决方法可能是使用em而不是

.link-reg {
  color: black;
  display: inline-block;
  margin-right: 3%;
  text-decoration: none;
  transition: all .2s ease-in;
  background-color: white;
  padding: 0.6em 1.2em;
  border-radius: 15em;
}

示例代码段

＆＃13;

* {
  padding: 0;
  margin: 0;
}

html {
  background-image: url("backgnd.jpg");
  background-size: cover;
  font-family: 'Roboto', sans-serif;
}

.logo {
  width: 10%;
  display: inline-flex;
}

.nav {
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.05);
  margin-bottom: 10%;
}

.link-first {
  color: white;
  margin-left: auto;
  margin-right: 3%;
  text-decoration: none;
  transition: color .2s ease-in;
}

.link-first:hover {
  color: rgba(255, 255, 255, 0.7);
}

.link {
  color: white;
  margin-right: 3%;
  text-decoration: none;
  transition: color .2s ease-in;
}

.link:hover {
  color: rgba(255, 255, 255, 0.7);
}

.link-reg {
  color: black;
  display: inline-block;
  margin-right: 3%;
  text-decoration: none;
  transition: all .2s ease-in;
  background-color: white;
  padding: 0.6em 1.2em;
  border-radius: 15em;
}

.link-reg:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

.wrapper {
  background-color: white;
  text-align: center;
  margin-left: 35%;
  margin-right: 35%;
  border-radius: 1em;
  padding-bottom: 3%;
}

.header {
  font-size: 200%;
  font-weight: 300;
  padding-top: 3%;
}

.sub-header {
  font-weight: 300;
  padding-bottom: 10%;
  margin-top: 1%;
}

#un {
  border: 0 none;
  font-size: 120%;
  font-weight: 300;
  display: inline-flex;
  background-color: rgba(0, 0, 0, 0.005);
}

.un-wrapper {
  padding: 3% 5% 3% 5%;
  display: flex;
  align-items: center;
  margin-left: 20%;
  margin-right: 20%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 7px;
  margin-bottom: 5%;
  border: 0 solid;
}

#pw {
  border: 0 none;
  font-size: 120%;
  font-weight: 300;
  display: inline-flex;
  background-color: rgba(0, 0, 0, 0.005);
}

.pw-wrapper {
  padding: 3% 5% 3% 5%;
  display: flex;
  align-items: center;
  margin-left: 20%;
  margin-right: 20%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 7px;
  border: 0 solid;
}

.submit {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.8);
  margin-top: 13%;
  padding: 3% 5% 3% 5%;
  border-radius: .5em;
  cursor: pointer;
  transition: all .2s ease-in;
}

.submit:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.s-text {
  color: white;
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <title>Login</title>
    <link href="index.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>

  <body>
    <div class="nav">
      <img src="../footer-logo.png" class="logo">
      <a href="#" class="link-first">Home</a>
      <a href="#" class="link">Community</a>
      <a href="#" class="link-reg">Register</a>
    </div>
    <div class="wrapper">
      <div class="header">
        Hello Again,
      </div>
      <div class="sub-header">
        Please Login
      </div>

      <div class="login-wrapper">
        <div class="un-wrapper">
          <input type="text" id="un" placeholder="Username">
          <i style="margin-left: auto;" class="material-icons">account_circle</i>
        </div>
        <div class="pw-wrapper">
          <input type="password" id="pw" placeholder="Password">
          <i style="margin-left: auto;" class="material-icons">lock</i>
        </div>
        <div class="submit">
          <div class="s-text">
            SUBMIT
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

＆＃13;

内联弹性框项目填充调整问题

1 个答案: