社区首页 >问答首页 >如何独立地更新两个内联输入的位置？

问如何独立地更新两个内联输入的位置？
EN

Stack Overflow用户

提问于 2021-07-01 03:20:23

回答 2查看 38关注 0票数 0

我一直在尝试创建一些登录文本/按钮选项卡。当我尝试更改位置时，它会同时更改用户名和密码标签。如何处理它，让它只改变一个，因为我不希望它们两个在同一位置。我曾尝试将单独的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>

我遗漏了什么？

css

web

html

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-07-01 04:12:07

使用这些HTML和CSS。告诉我你是否得到了正确的结果。

在CSS中不使用.loginbox input[]：

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

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

.passclass {
  position: relative;
  margin-right: 0px;
}

<div class="loginbox">
  <input type="text" class="userclass" name="" placeholder="Insert Username">
  <input type="password" class="passclass" name="" placeholder="Insert Password">
</div>

在CSS中使用.loginbox input[]：

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

.loginbox input[type="text"], input[type="password"] {
  border:none;
  border-bottom: 1px solid #fff;
  background: transparent;
  outline: none;
  color: #000;
  font-size: 16px;
  position: relative;
  right: 50px;
}

.userclass {
  margin-right: 25px;
}

.passclass {
  margin-right: 0px;
}

<div class="loginbox">
  <input type="text" class="userclass" name="" placeholder="Insert Username">
  <input type="password" class="passclass" name="" placeholder="Insert Password">
</div>

票数 0

Stack Overflow用户

发布于 2021-07-01 03:30:47

您可以分别使用.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>