Question

我想将输入对齐到我的div main内的h1下。 H1目前使用flexbox垂直和水平居中，输入继承相同的属性。当我尝试添加display：inline;和display: inline-flex;，输入框仍然不在H1的下方，而在它的右侧。

如何在我当前的H1下面输入我的输入，同时保持在我的<div class="main">

中

html,
body {
  padding: 0px;
  margin: 0px;
}

.main {
  height: 100%;
  width: 100%;
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
  z-index: -1;
}

.main-h1 {
  text-transform: uppercase;
  font-family: 'Secret Code';
  font-weight: bolder;
  font-size: 70px;
}

input {
  display: inline-flex;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>BackGround Color</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="colors.js"></script>
</head>

<body>
  <script type="text/javascript">
    function takeinput() {
      var input = document.getElementById('user').value;
      document.body.style.backgroundColor = input;
    }
  </script>
  <div class="main">
    <div class="main-h1">Full Screen BackGround Color</div>
    <input type="text" name="enter" class="enter" id="user" value="" />
    <input type="button" value="click" onclick="takeinput();" />
  </div>
</body>

</html>

Answer 1

我认为您正在寻找flex-direction: column;类定义中的.main。

这是一个代码笔，向您展示我的意思： Codepen Example of Flexbox's flex-direction property

如何在H1下调整输入

1 个答案: