Question

如何使用html和css

在texbox中添加垂直线

<input type=text value=First|LastName >

需要垂直条看起来像两个值在两个不同的文本框中

Answer 1

这是我的尝试......
这是一个完整的黑客攻击，我真的不确定它是否适合移动设备..
但是我考虑使用<span>元素将2个元素放在同一行上，然后使用JS计算一个对象需要移动多少才能放在另一个对象的顶部。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <span>
  <input id="movedIntoMe" type="textarea" style="background: #FFF;padding-right:1em; display:inline-block;line-height:1.2em" value="bla"/>
  <input id="toBeMovedLeft" type="textarea" value="" disabled style="background:black; width:0px; border:none;"/>
  </span>

  <script>
    document.getElementById("toBeMovedLeft").style.marginLeft = Number(document.getElementById("movedIntoMe").offsetWidth) / 2 * (-1) + "px";
  </script>
</body>
</html>

如何使用html和css在texbox中添加垂直线

1 个答案: