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：

HTML元素可防止文本分成新行自动地，它显示在一个长行和滚动可能是必要的。 此标记不是标准HTML，不应使用。而是使用CSS属性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>

Answer 2

这很可能是因为它不是标准标记MDN fills in a few more blanks。在解决问题方面，请确保列表元素设置为＆＃34; display：inline＆＃34;。

为什么<nobr>不能与Foundation小部件一起使用？</nobr>

2 个答案: