时间戳

首页 > 解决方案 > 输入框形状受父 div 限制

html - 输入框形状受父 div 限制

问题描述

我想实现类似于这张照片的登录区域的外观。

在此处输入图像描述

我目前的 HTML 和 CSS 如下： HTML

<div className="loginArea">
    <p>Account Login</p>
    <div className="inputBoxes">
      <div>
        <input type="text" placeholder="Username" />
        <input type="password" placeholder="Password" />
      </div>
      <div>
        <p>Sign In</p>
      </div>
    </div>
  </div>

CSS

      .loginArea {
  margin: auto;
  padding-top: 8%;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 400px;
  justify-content: center;
}

.inputBoxes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 15px;
  background-color: blue;
}

.inputBoxes div {
  display: flex;
  justify-content: center;
}

input {
  flex-grow: 1;
  border: none;
}

我的目标是根据输入/登录按钮的形状来实现此输入区域的样式，就像一个带圆角的矩形一样。

我遇到的问题有两个：

  1. 我似乎无法将输入区域的大小限制为父容器。它们在父 div 之外运行。

  2. 我似乎无法让输入区域接受父容器的受限边界半径。

我是否必须为圆形边框单独设置每个元素的样式，以及如何将用户名和密码区域限制为父 div 的宽度？

如果有“更好”的方法，我愿意接受建议。

标签： htmlcss

解决方案

由于您已经在使用 flexbox，因此输入元素的大小似乎可以正确地放入父元素的范围内，没有任何问题。

关于您的第二个问题，添加overflow: hidden到元素.inputBoxes将起作用。

请参阅下面的概念验证：

body {
  background-color: #ccc;
}

.loginArea {
  margin: auto;
  padding-top: 8%;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 400px;
  justify-content: center;
}

.inputBoxes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 15px;
  background-color: blue;
  overflow: hidden;
}

.inputBoxes div {
  display: flex;
  justify-content: center;
}

input {
  flex-grow: 1;
  border: none;
  height: 35px; /* Just for demo */
}
<div class="loginArea">
  <p>Account Login</p>
  <div class="inputBoxes">
    <div>
      <input type="text" placeholder="Username" />
      <input type="password" placeholder="Password" />
    </div>
    <div>
      <p>Sign In</p>
    </div>
  </div>
</div>

推荐阅读