无法将输入光标放在文本框上

Question

我创建了此表单，我想成为这个职位。但是由于某种原因，我不能将光标集中在Bank Name , Address , Country上，因为它是多余的。知道如何解决这个问题吗？

.grid2 #col2 {
  padding-left: 500px;
  position: absolute;
  top:10px;
}

Demo in here

Answer 1

删除位置：绝对；从CSS中，您将可以将光标放在框中。

如果要并排放置组件，则可以将它们向左浮动或使用flexbox布局。

Answer 2

我会重新考虑您的编码方式。尽管有一些快速修复程序，但是在出现新的相关问题之前，不会很快。 您可以像这样分解它。您需要2列可以这样实现：

<div class="container"> <div class="content1"> ...ul > li elements.... </div> <div class="content2"> ...ul > li elements.... </div> </div>

.container { display:flex; align-items:flex-start; }

您在li中的标签大约需要width:30%和输入width:69%;才是安全的。向左浮动。

查看Flexbox，从那里应该可以使响应变得更快速，更可靠。

Answer 3

在您的CSS中，“。grid2＃col2”将填充设置为左侧500px。您想要的是保证金不填充。填充是假想盒子中的间距，边距是盒子外面的间距。您看不到光标，因为您实际上是在＃col2输入的假想框中单击。将其更改为margin，您的光标将在您想要的输入字段中可见。

.grid2 #col2 {
   padding-left: 500px;  <-- change this to margin-left: 500px;  --- 
  position: absolute;
  top:10px;
}