Javascript 使div隐形&；js关闭时保持稳定

我有一个

，它是表单的一部分

它是一个红色的圆圈。当我禁用JS时，它仍然显示（我知道我可以使用

display:none

来修复这个问题）

问题是，当我再次启用JS时，在用户交互中，我的

向下一行（它没有保持原来的位置）

这让我很恼火，因为我有输入字段，而div位于每个div的末尾。。。所以我想要的是（如果可能的话，让div在js/off上不显示，并且在js/on&用户交互时不向下跳行…）

HTML:

JS:

$（.span1”）.hide（）；
函数名事件（）{
$（this）.next（）.toggle（$（this）.val（）.length添加到CSS文件中

#name{
position:relative;
}

并添加一个属性
位置：绝对；英寸span1

所以span1看起来像这样

.span1{
background-color: white;
  color: red;
  height: 28px;
  width: 28px;
  font-size: 0.6em;
  margin-right: 1px;
  margin-bottom:2px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  border-radius: 100%;
  border:2px solid red;
  display:inline-block;
  font-family:Verdana, Geneva, sans-serif;
  position:absolute;
  }

欢迎使用Stack Overflow！寻求代码帮助的问题必须包含在问题本身中复制代码所需的最短代码。尽管您提供了指向示例的链接，但如果链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。当我将“display:inlike block”更改为“d”时isplay:none'它在'input'下？！请参阅问题中的
链接
！=
问题中的代码
。态度不受欢迎。@isherwood现在可以了吗？你想做什么？请详细说明我想让div确认它在js上的位置已关闭，因为我使用js来隐藏/显示它，并这样做（据我目前所知）您可以编写display:none，在css中插入内联块，但当我这样做时，它会向下移动一行（红色圆环div）所以这不是同一个位置，这就是问题所在，那些不知道答案的人否决了这篇文章，他们感到羞耻…我认为这是一个充满人的地方，不是仇恨和自我的地方…我认为你应该使用css可见性属性而不是显示属性。可见性：隐藏；可见性：可见；试试这个我不想让他们设置为invisible，因为否则我就不会在这里了，我希望他们是可见的，问题是位置的变化，而不是可见性状态：）
$(".span1").hide();

function nameEvent(){
$(this).next().toggle($(this).val().length <=1);
}
$("#namebox").on("focus input", nameEvent);

#name{
position:relative;
}

.span1{
background-color: white;
  color: red;
  height: 28px;
  width: 28px;
  font-size: 0.6em;
  margin-right: 1px;
  margin-bottom:2px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  border-radius: 100%;
  border:2px solid red;
  display:inline-block;
  font-family:Verdana, Geneva, sans-serif;
  position:absolute;
  }