时间戳

首页 > 解决方案 > 如何独立更新两个内联输入的位置？

html - 如何独立更新两个内联输入的位置？

问题描述

我一直在尝试创建一些登录文本/按钮选项卡。当我尝试更改位置时，它会更改用户名和密码标签。如何接近它以便它只改变一个，因为我不希望它们两个处于同一位置。我尝试将单独的 CSS 类应用于标签并移动它们，但它并没有在屏幕上显示它们。我目前所做的：

.loginbox input[type="text"], input[type="password"] {
  right: 100%;
  border:none;
  border-bottom:ipx solid#fff;
  background: transparent;
  outline: none;
  color: #000;
  font-size: 16px;
  position: relative;
  right: 50px;
}
<div class="loginbox">
  <input type = "text" class = "userclass" name = "" placeholder = "Insert Username">
  <input type = "text" class = "passclass" name = "" placeholder = "Insert Password">
</div>

我错过了什么？

标签： htmlcssweb

解决方案

您可以简单地分别使用和来定位userclass和passclass类本身。.userclass.passclass

如果您有其他元素使用这些类，则可以明确确保它们是loginbox具有子组合器的类的直接子级>，如下所示。

请注意，right这不适用于position: relative，如果您想使用它，则需要将它们设置position为absolute：

.loginbox > .userclass {
  position: absolute;
  right: 175px;
}

.loginbox > .passclass {
  position: absolute;
  right: 0;
}
<div class="loginbox">
  <input type="text" class="userclass" name="" placeholder="Insert Username">
  <input type="text" class="passclass" name="" placeholder="Insert Password">
</div>

如果您希望使用相对定位（我推荐），则可以使用margin-right绝对定位的父级：

.loginbox {
  position: absolute;
  right: 0;
}

.loginbox > .userclass {
  position: relative;
  margin-right: 25px;
}

.loginbox > .passclass {
  position: relative;
  margin-right: 0px;
}
<div class="loginbox">
  <input type="text" class="userclass" name="" placeholder="Insert Username">
  <input type="text" class="passclass" name="" placeholder="Insert Password">
</div>

推荐阅读