为什么 <nobr> 不适用于 Foundation 小部件？

Question

我有问题。

<nobr>
      <a href="#" class="button">Button 3</a>
      <ul class="button-group">
        <li><a href="#" class="button">Button 1</a></li>
        <li><a href="#" class="button">Button 2</a></li>
        <li><a href="#" class="button">Button 3</a></li>
      </ul>
      </nobr>

我想在一行中显示所有按钮，但不起作用。

Answer 1

这很可能是因为它不是标准标签，MDN fills in a few more blanks。在解决问题方面，确保列表元素设置为 "display:inline".

Answer 2

根据MDN：

The HTML element prevents a text from breaking into a new line automagically, so it is displayed on one long line and scrolling might be necessary. This tag is not standard HTML and should not be used. Instead use the CSS property white-space.

而不是 nobr 为什么不使用 display: inline-block:

ul li,
a {
  display: inline-block;
}

 <a href="#" class="button">Button 3</a>

<ul class="button-group">
  <li><a href="#" class="button">Button 1</a>
  </li>
  <li><a href="#" class="button">Button 2</a>
  </li>
  <li><a href="#" class="button">Button 3</a>
  </li>
</ul>

如果你想让所有的都在同一行使用float: left:

ul li,
a {
  display: inline-block;
  float: left;
}

 <a href="#" class="button">Button 3</a>

<ul class="button-group">
  <li><a href="#" class="button">Button 1</a>

  </li>
  <li><a href="#" class="button">Button 2</a>

  </li>
  <li><a href="#" class="button">Button 3</a>

  </li>
</ul>

为什么 <nobr> 不适用于 Foundation 小部件？

why <nobr> does not work with Foundation widget?

javascript

css

zurb-foundation