Question

我编写了这个简单的CSS技巧，以便在您点击输入（：焦点）时显示工具提示将为您提供有关输入的一些信息。一切正常，但工具提示显示在输入下方而不是结束。实际上我知道我可以使用保证金来修复它，但是我问是否有更多＆＃34;更多＆＃34;干净的方式，当你以这种方式使用绝对位置时，它会自动将工具提示对准输入。

HTML：

<div>
    <input type="text" placeholder="Username">
    <span class="input_info">Info1</span>
</div>
<div>
    <input type="text" placeholder="Password">
    <span class="input_info">Info2</span>
</div>

CSS

.input_info {
    display: none;
    position: absolute;
    background: #000;
    border: 1px solid #fff;
    color: #fff;
    width: 100px;
    margin-left: 80px;
}

input[type="text"]:focus + .input_info {
    display: block;
}

https://jsfiddle.net/xzqsaobu/

Answer 1

您需要将display: block更改为display: inline-block，删除margin-left和position: absolute;。

<强> Your fiddle updated

段：

＆＃13;

.input_info {
  background: #000;
  border: 1px solid #fff;
  color: #fff;
  width: 100px;
  display: none;
}

input[type="text"]:focus + .input_info {
  display: inline-block;
}

＆＃13;

<div>
<input type="text" placeholder="Username">
<span class="input_info">Info1</span>
</div>
<div>
<input type="text" placeholder="Password">
<span class="input_info">Info2</span>
</div>

＆＃13;

Answer 2

以下是position: absolute和relative。

的使用方法

在容器上，设置position: relative和display: table（缩小至适合）。
对于position: absolute工具提示，请设置top: 0和left: 100%（移至相关容器的右边缘）。

您还可以使用此方法在页面中以字段为中心。

<强> jsFiddle

.fieldset {
  position: relative;
  display: table;
  /* margin: auto; */
}
.input_info {
  position: absolute;
  left: 100%;
  top: 0;
  background: #000;
  border: 1px solid #fff;
  color: #fff;
  width: 100px;
  display: none;
}
input[type="text"]:focus + .input_info {
  display: block;
}

<div class="fieldset">
  <input type="text" placeholder="Username">
  <span class="input_info">Info1</span>
</div>
<div class="fieldset">
  <input type="text" placeholder="Password">
  <span class="input_info">Info2</span>
</div>

输入右侧的工具提示

2 个答案: