Question

我有display:none的跨度，但仍然需要它的高度＆amp;宽度，是否有办法实现它而无需更改显示或使用visibility:hidden？

＆＃13;

.mySpan{
   display:none;
}

＆＃13;

<div>
  <label>Name</label>
  <input type="text" id="personName" name="personName" />
  <br/>
  <span class="mySpan">Text that can be displayed or not</span>
</div>
<div>
  <label>Last name</label>
  <input type="text" id="personLastName" name="personLastName" />
  <br/>
  <span class="mySpan">Text that can be displayed or not</span>
</div>

＆＃13;

我需要跨度的高度，以便在visibility=hidden之间始终保持div之间的距离。

Answer 1

display:none;不占用任何空间，您可以在自己的代码段中看到。 visibility: hidden但是，是否使用空格。

＆＃13;

.mySpan1 {
display: none; 
}
.mySpan2 {
visibility: hidden; 
}

＆＃13;

<div>
<label>Name</label>
<input type="text" id="personName" name="personName" />
<br/>
<span class="mySpan1">Text that can be displayed or not</span> text after display: none
</div>
<div>
<label>Last name</label>
<input type="text" id="personLastName" name="personLastName" />
<br/>
<span class="mySpan2">Text that can be displayed or not</span> text after visibility: hidden;
</div>

＆＃13;

添加：如果您想要空白空间而不使用visibility: hidden，则只需创建一个仅包含 作为其内容且无额外显示参数的标记

Answer 2

visibility:hidden是您正在寻找的 - 没有充分理由不使用它。

你不能拥有display:none并且元素占用空间

该框是不可见的（完全透明，没有绘制任何内容），但仍会影响布局。如果元素具有可见性，则该元素的后代将是可见的：可见（这在IE版本7中不起作用）。

这是一个操纵错误范围的脚本 - 我认为这是你真正想要的

window.onload=function() {
  var fields = document.querySelectorAll(".nameField");
  for (var i=0;i<fields.length;i++) {
    fields[i].onblur=function() {
      document.getElementById(this.getAttribute("data-error")).style.visibility=this.value.trim()==""?"visible":"hidden";
    }
    fields[i].onfocus=function() {
      document.getElementById(this.getAttribute("data-error")).style.visibility="hidden";
    }
  }
}

.mySpan {
  visibility: hidden;
}

<div>
  <label>Name</label>
  <input type="text" class="nameField" id="personName" name="personName" data-error="fNameSpan" />
  <br/>
  <span class="mySpan" id="fNameSpan">Please enter a first name</span>
</div>
<div>
  <label>Last name</label>
  <input type="text" class="nameField" id="personLastName" name="personLastName" data-error="lNameSpan" />
  <br/>
  <span class="mySpan" id="lNameSpan">Please enter a last name</span>
</div>

Answer 3

将其包装成另一个，如下面的代码段，

＆＃13;

.mySpan{
   display:none;
}

＆＃13;

<div>
  <label>Name</label>
  <input type="text" id="personName" name="personName" />
  <br/>
  <span><span class="mySpan">Text that can be displayed or not</span>&nbsp;</span>
</div>
<div>
  <label>Last name</label>
  <input type="text" id="personLastName" name="personLastName" />
  <br/>
  <span><span class="mySpan">Text that can be displayed or not</span>&nbsp;</span>
</div>

＆＃13;

Answer 4

我不确定你要完成什么，但我猜const squares = history[this.state.pos].slice(); .. history[this.state.pos + 1] = squares;将完成这项工作。 opacity:0从文档流中删除元素，而display:none维护元素的框模型。

使用display：none但仍保留使用的空间

4 个答案: