Html CSS问题：Can'；不要让UL元素不换行文本

我看过一些类似的帖子，但我似乎无法做到这一点。我正在为一个网页编写菜单，但在UL包装中出现了一些问题

我想看到的是UL内容（全部8个菜单项）在一行上，而不是环绕（在顶行显示6个菜单项，并将其他两个菜单项环绕到一个新行）。此外，当突出显示在中间文本的中间时，出现在文本下的行。有关对齐的含义，请参见以下内容

What I expect: 
  WhoWeAre    Our Team   Farming   Products   Customers   Recruitment   Latest News  Contact Us
             ----------

What I get: (note miss aligned line) 
  WhoWeAre    Our Team   Farming   Products   Customers   Recruitment   Latest News  Contact Us
                                -----------

HTML

---

所有代码都在这里：

尝试添加

空白：nowrap到
标签：


ul{
空白：nowrap；
}
.sitemenu2{
宽度：100%；
保证金：0自动；
}
ulli{
显示：内联；
填充：10px；
文本对齐：居中；
列表样式位置：外部；
}
梅努利克先生{
显示：内联块；
宽度：12.5%；
填充：.750；
保证金：0；
文字装饰：无；
颜色：#333；
}
.MENUOPTION 2：悬停~hr{
左缘：12.5%；
}
.menuOption3：悬停~hr{
左边缘：25%；
}
.MENUOPTION 4：悬停~hr{
左缘：37.5%；
}
.menuOption5:悬停~hr{
左边距：50%；
}
.menuOption6：悬停~hr{
左缘：62.5%；
}
.MENUOPTION 7：悬停~hr{
左边缘：75%；
}
.MENUOPTION 8：悬停~hr{
左缘：87.5%；
}
人力资源{
高度：.25雷姆；
宽度：12.5%；
利润率：20px；
背景：#79288C；
边界：无；
转换：.3s易进易出；
}

我想看到的是UL内容（所有8个菜单项）在单个行上，而不是环绕，并且在突出显示在中心文本的中间出现的文本下出现的行。有关对齐的含义，请参见以下内容。
好：谁是我们的团队农产品客户招聘最新消息联系我们------坏：谁是我们的团队农产品客户招聘最新消息联系我们-----------







请使用堆栈代码段，而不是外部代码站点。
我看过一些类似的帖子，但我似乎无法实现这一点。你有没有尝试在谷歌上搜索例如“css不换行文本”（这是你的问题标题）？如果你愿意，第一个结果是->第二个结果是->。你怎么能说你到处都找了，但没有找到解决办法？我看过类似的帖子，并尝试应用一些CSS，但我无法让它为我工作。因此，我想知道我的CSS中是否有什么特殊的地方出了问题，或者是因为我把它放在了一个表中，它的行为很奇怪。寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。请参阅。在上述两个链接中，解决方案都是
空白：nowrap。因此，在您的情况下，
ul
。那不行吗？（用于包装问题）
<div class="sitemenu2">
  <table style="background-color: #FFFFFF; color: #79288C;text-decoration: none;">
    <tr>
      <td><img src="./images/smallLogo.png" style="padding-right:20px"></td>
      <td>
        <ul>
          <li class="menuOption1" href="./whoweare.html"><a class="menulink" style="text-decoration: none; color:#79288C">Who We Are</a></li>
          <li class="menuOption2" href="./ourteam.html"><a class="menulink" style="text-decoration: none; color:#79288C">Our Team</a></li>
          <li class="menuOption3" href="./farming.html"><a class="menulink" style="text-decoration: none; color:#79288C">Farming</a></li>
          <li class="menuOption4" href="./products.html"><a class="menulink" style="text-decoration: none; color:#79288C">Products</a></li>
          <li class="menuOption5" href="./customers.html"><a class="menulink" style="text-decoration: none; color:#79288C">Customers</a></li>
          <li class="menuOption6" href="./recruitment.html"><a class="menulink" style="text-decoration: none; color:#79288C">Recruitment</a></li>
          <li class="menuOption7" href="./news.html"><a class="menulink" style="text-decoration: none; color:#79288C">Latest News</a></li>
          <li class="menuOption8" href="./contactus.html"><a class="menulink" style="text-decoration: none; color:#79288C">Contact Us</a></li>
          <hr />
        </ul>
    </tr>
  </table>
</div>

.sitemenu2 {
  width: 100%;
  margin: 0 auto;
}

ul li {
  display: inline;
  padding: 10px;
  text-align: center;
  list-style-position: outside;
}

.menulink {
  display: inline-block;
  width: 12.5%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
}

.menuOption2:hover~hr {
  margin-left: 12.5%;
}

.menuOption3:hover~hr {
  margin-left: 25%;
}

.menuOption4:hover~hr {
  margin-left: 37.5%;
}

.menuOption5:hover~hr {
  margin-left: 50%;
}

.menuOption6:hover~hr {
  margin-left: 62.5%;
}

.menuOption7:hover~hr {
  margin-left: 75%;
}

.menuOption8:hover~hr {
  margin-left: 87.5%;
}

hr {
  height: .25rem;
  width: 12.5%;
  margin: 20px;
  background: #79288C;
  border: none;
  transition: .3s ease-in-out;
}