Question

我有<div>是表单的一部分。

这是一个红圈。当我禁用JS时，它仍然显示（我知道我可以使用display: none来修复它。）

问题在于，当我再次启用JS时，在用户交互中，<div>会向下移动一行（它不会保持原始位置）。

这让我很烦，因为我有输入字段，div在每个div的末尾......所以我想要的（如果可能的话就是让div不显示在js / off而不是跳过一行在js / on＆amp;用户交互...

HTML：

  <!DOCTYPE html>
  <html>
  <head>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
<meta charset="utf-8">
 <title>JS Bin</title>
</head>
<body>

 <div id="name1" >
         <input type="text" id="namebox" placeholder="First name* ..."name="name">
         <div class="span1">!</div>
         </div> 
         <div id="name2" >
         <input type="text" id="namebox1" placeholder="Last name* ..." name="surname">
          <div class="span1">!</div>
         </div> 
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"  type="text/javascript" charset="utf-8"></script>

</body>

</html>

CSS：

 .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;
 }

JS：

$(".span1").hide();

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

Answer 1

添加CSS文件

#name{
position:relative;
}

并添加一个属性。strong 1中的位置：绝对;

所以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;
  }

让div看不见＆amp; js关闭时稳定

1 个答案: