Question

我很难弄明白这个css，当我收缩页面时，一个按钮有时会与编辑框重叠。当我用firebug进行调试时，它显示容器的宽度= 0，所以当我添加一些宽度按钮弹出回到它的位置。无论如何我添加到代码style =“width：162px;”＆gt;但在调试过程中，width = 0在一段时间后又回来了，按钮再次重叠。

如何更改硬编码宽度？

<div class="blocks layout-filter-box" style="width: 162px;">
   <div class="area" id="area1" style="height: 41px;">
      <label for="field1">Store Name</label>
      <span class="text">
      <input id="tab-1_NameInput" type="text" data-bind="value: Name, valueUpdate: 'afterkeydown'"/>
      <input type="text" style="visibility: hidden"/> 
      </span>
   </div>
   <div class="button-box">
      <span class="submit"><input id="tab-1_search" type="button" value="Search" /></span>
   </div>
</div>

Answer 1

它必须是像javascript一样的动态脚本。您可以尝试更改div的名称，添加css属性“！important”或在页面末尾（在标记之前）覆盖javascript中的类。

Answer 2

尝试为特定div添加ID，并将其与下面给出的类一起使用。它将覆盖额外的宽度设置。检查CSS Specificity

#blocks.blocks{
   width:162px;
}

Answer 3

如果您不希望动态内容更改块的大小，请尝试添加max-width声明来约束它。这告诉布局，在任何情况下，此元素的宽度都不应超过您定义的宽度。 Read more about max-width.

.blocks {
  max-width: 162px;
  width: 162px;
}

潜在的缺点是，如果添加overflow: hidden;，您的内容将会被截断，除非您添加overflow-x: auto，例如。

Answer 4

使用max-width＆amp; min-width属性可以控制它。另一件事是尝试在维度，边距，填充和所有事情中使用像素，以便调整浏览器的大小不会影响它们：）

宽度为何变化？

4 个答案: