个人中心
gpt4 book ai didi

html - 内联 flex 盒元素填充调整问题

转载 作者：行者123 更新时间：2023-11-28 01:02:37 25 4
gpt4 key购买 nike

我想调整 flex-box 的顶部和底部内边距，但更改没有显示在浏览器中。我认为问题在于以下规则之一:

.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 行。Fiddle 可用 here .谢谢!

注意:我知道有这样一个问题，但不清楚，没有解释，我不喜欢所示的解决方案。

最佳答案

A long with Firefox had a bug report在 flex 元素上使用百分比时，规则显然可以用两种方式解释，如图所示 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;
}

示例片段

* {
  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;
}
<!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>

关于html - 内联 flex 盒元素填充调整问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41420172/

25 4 0
文章推荐： javascript - iron-page 上的 iron-scroll-threshold
文章推荐： html - HTML中是否有类似于\textsc(来自LaTeX)的标签？
文章推荐： jquery - 如何使用 JQuery 选择当前悬停的元素？
文章推荐： html - 在 html5 中使用 ip/port 制作音频流
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com