Question

我有一个非常快速的问题。我在YouTube教程和社区的帮助下开发了这个css和html。但是，我确实有一个问题，我花了一个小时试图解决它，但没有运气。当我调整窗口大小时，页面中心的垂直线（div =＆＃34; splitter＆＃34;）消失，输入字段的左侧也没有空格。有人可以解释一下原因吗？

另外，如果你们不介意我的css代码怎么样？这是对的吗？

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* :focus {
  outline: none;
}

body {
  background-color: #ced4da;
  font-family: sans-serif;
}

.wrapper {
  height: 100vh;
  display: flex;
}

.login-form {
  flex: 1;
  justify-content: flex-end;
  display: flex;
}

.login-form input[type="email"],
input[type="password"] {
  border: none;
  background: white;
  height: 40px;
  padding-left: 60px;
  margin-bottom: 10px;
  width: 100%;
}

.login-form input[type="submit"] {
  border: none;
  background-color: #3DBB96;
  color: white;
  outline: none;
  height: 40px;
  font-size: 15px;
  width: 300px;
  font-weight: lighter;
}

form {
  align-self: center;
}

.splitter {
  background-color: grey;
  width: 0.5px;
  height: 180px;
  align-self: center;
  margin-right: 40px;
  margin-left: 50px;
}

.side-text {
  flex: 1;
  align-self: center;
  line-height: 30px;
}

.side-text h2 {
  font-weight: normal;
}

.side-text p {
  font-weight: lighter;
}

＆＃13;

<div class="wrapper">
  <div class="login-form">
    <form action="Login.php" method="POST">
      <div class="email-input-field">
        <input type="email" placeholder="Email" name="emailPost">
      </div>
      <div class="password-input-field">
        <input type="password" placeholder="Password" name="passwordPost">
      </div>
      <div class="submit-button">
        <input type="submit" value="Submit">
      </div>
    </form>
  </div>
  <div class="splitter"></div>
  <div class="side-text">
    <h2>Cold Ops</h2>
    <p>ADMINISTRATION PANEL</p>
  </div>
</div>

＆＃13;

Answer 1

分割器上的宽度为0.5px。我尝试将它提升到1px，但看到它没有帮助。似乎有用的是将min-width设置为1px。

你的css看起来不错，但我建议你更多地了解一下这个好文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

左侧没有空间的原因是你没有设置任何空间。您是否可能需要将margin-left设置为某个而不是padding-left？

Answer 2

也许是因为flexbox而发生的。我通过边境工作。现在它按预期工作，因为边框不受可能的动态宽度的影响。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* :focus {
  outline: none;
}

body {
  background-color: #ced4da;
  font-family: sans-serif;
}

.wrapper {
  height: 100vh;
  display: flex;
}

.login-form {
  flex: 1;
  justify-content: flex-end;
  display: flex;
}

.login-form input[type="email"],
input[type="password"] {
  border: none;
  background: white;
  height: 40px;
  padding-left: 60px;
  margin-bottom: 10px;
  width: 100%;
}

.login-form input[type="submit"] {
  border: none;
  background-color: #3DBB96;
  color: white;
  outline: none;
  height: 40px;
  font-size: 15px;
  width: 300px;
  font-weight: lighter;
}

form {
  align-self: center;
}

.splitter {
  background-color: grey;
  border-left: 1px solid black;
  height: 180px;
  align-self: center;
  margin-right: 40px;
  margin-left: 50px;
}

.side-text {
  flex: 1;
  align-self: center;
  line-height: 30px;
}

.side-text h2 {
  font-weight: normal;
}

.side-text p {
  font-weight: lighter;
}

<div class="wrapper">
  <div class="login-form">
    <form action="Login.php" method="POST">
      <div class="email-input-field">
        <input type="email" placeholder="Email" name="emailPost">
      </div>
      <div class="password-input-field">
        <input type="password" placeholder="Password" name="passwordPost">
      </div>
      <div class="submit-button">
        <input type="submit" value="Submit">
      </div>
    </form>
  </div>
  <div class="splitter"></div>
  <div class="side-text">
    <h2>Cold Ops</h2>
    <p>ADMINISTRATION PANEL</p>
  </div>
</div>

为什么在调整窗口大小时输入字段的左侧没有空格？

2 个答案: