Question

我的网页顶部附近有一些HTML / CSS按钮，水平排列在一起。当网页被视为正常（全屏）时，一切正常，但当您调整浏览器窗口的大小（即使其不是全屏）时，按钮开始消失。当您开始将浏览器窗口的宽度范围拖动到按钮上时，每个按钮都会单独消失。如果我不能很好地解释这一点，我们的照片就是在这里展示的。

在拖动按钮之前：

拖动按钮后：

我已经通过在CSS类中包含“float：left”和“white-space：nowrap”来尝试针对堆栈溢出的类似问题的常见修复，但按钮仍然包装。制作按钮的HTML是：

  <div class="buttons">
    <div onmousedown="return false"><a class="aBtn" href="DPS_Guitarspg3.html">Guitars</a></div>
    <div onmousedown="return false"><a class="aBtn" href="DPS_Guitarspg4.html">Basses</a></div>
    <div onmousedown="return false"><a class="aBtn" href="DPS_Guitarspg2.html">Our Philosophy</a></div>
    <div onmousedown="return false"><a class="aBtn" href="DPS_Guitarspg5.html">Custom Orders</a></div>
    <div onmousedown="return false"><a class="aBtn" href="DPS_Guitarspg6.html">Contact Us</a></div>
  </div>

'aBtn'类的CSS是：

.aBtn {
  /*left-10 due to automated spaceing in browser*/
  text-decoration: none;
  color:rgb(111,0,100);
  background-color:rgb(0,0,5);
  border:1px solid transparent;
  font-family: "arial";
  padding:8px 40px;
  width: auto;
  height: 5%;
  top:60px;
  float: left;
  white-space: nowrap;
}

任何帮助都表示赞赏，并提前致谢。

Answer 1

在按钮类中使用width或min-width，并将display设置为阻止或内联阻止

Answer 2

我不太确定你的目标是什么，但你可以尝试/** * Multi.js * * <pre> * - FIX zIndex of the thumb (inspired by {@link http://stackoverflow.com/questions/22668048/extjs-slider-z-index-issue)} * </pre> * * @class * @author Antoine Verron * @version $Revision$ Last modifier: $Author$ Last commit: $Date$ */ Ext.define('MyApp.overrides.slider.Multi', { override: 'Ext.slider.Multi', initComponent: function() { this.callParent(this); this.on('changecomplete', this.demoteThumbs, this); }, /** * Oposite of promote * * @private */ demoteThumbs: function() { var thumbs = this.thumbStack || (this.thumbStack = Ext.Array.slice(this.thumbs)), ln = thumbs.length; // Then shuffle the zIndices for (i = 0; i < ln; i++) { thumbs[i].el.setStyle('zIndex', 0); } } });按钮float而不是right，看看是否有所作为。

HTML按钮不会停止包装

2 个答案: