ul li list text转到第二行

Question

我正在尝试使用html5和css3构建一个网站，但我的菜单链接有问题。

基本上对于菜单栏我使用带有“a”的列表。但是当我向其添加边距或填充时，部分文本会转到另一行，如下所示。

这是html代码：

<section id="accessibility">
        <ul class="inline-content">
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Accessibility</a></li>
        <li><a href="#">Login</a></li>
    </ul>
</section>

这里是css代码：

#accessibility{
    margin-right: 2%;
}

    #accessibility ul li{
        min-width: 4rem;
        padding-left:  2%;
    }

    #accessibility ul li:first-child{
    }

    #accessibility ul li a{
        text-decoration: none;
        color: green;
        font-size: 1.2rem;
    }

我该如何解决？

Answer 1

#accessibility{
    margin-right: 2%;
}

    #accessibility ul li{
        min-width: 4rem;
        padding-left:  2%;
        display:inline-block;
    }

    #accessibility ul li:first-child{
    }

    #accessibility ul li a{
        text-decoration: none;
        color: green;
        font-size: 1.2rem;
    }

<section id="accessibility">
   <ul>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">Accessibility</a></li>
      <li><a href="#">Login</a></li>
    </ul>
</section>

Answer 2

使用“无中断空间”Unicode：

<a href="www.stackoverflow.com">Contact&nbsp;us</a>

这会使单词保持在同一行。