html - 水平下拉菜单一行不显示两个词

Question

我正在 wordpress 上制作一个水平下拉菜单，但我的下拉菜单在一行中只显示一个单词。我试图设置它但失败了。使用以下代码

<nav id="site-navigation" class="main-navigation ps-nav " role="navigation">
<div class="nav-wrapper">
<div class="menu-main-menu-container">
<ul id="primary-menu" class="menu">
<li id="menu-item-289" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-289">
<a href="/work">work</a>
</li>
<li id="menu-item-288" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-51 current_page_item menu-item-has-children menu-item-288"><a href="/office">office</a>
<ul class="sub-menu">
<li id="menu-item-292" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-292"><a href="#">profile</a></li>
<li id="menu-item-293" class="menu-item menu-item-type-custom menu-item-object-custom   menu-item-293"><a href="#">contact us</a></li>
<li id="menu-item-294" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-294"><a href="#">people</a></li>
</ul>
</li>
<li id="menu-item-287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-287"><a href="/contact">contact</a>
</li>
</ul>
</div>
</div>
</nav>

<style>

.main-navigation {
text-align: center;
line-height: 1;
}
.menu-main-menu-container {
float: right !important;
}
ul {
list-style: none;
}
body {
background: black;
}
ul, ol {
margin: 0;
padding: 0;
}
ul, menu, dir {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
.main-navigation ul li {
margin-left: 25px;
line-height: 18px;
position: relative;
float: left;
font-weight: 900;
font-style: normal;
font-size: 30px;
letter-spacing: 0px;
text-transform: lowercase;
}

li {
display: list-item;
text-align: -webkit-match-parent;
}

.main-navigation ul li a {
padding: 4px 0px 15px 4px;
}
.main-navigation ul li a {
color: #ffffff;
display: inline-block;
position: relative;
text-decoration: none;
}
a {
background-color: transparent;
}
.main-navigation ul ul {
min-width: 180px;
position: absolute;
top: 100%;
margin: 30px 0 0;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.current-menu-item ul, .current-menu-parent ul {
DISPLAY: unset !important;
opacity: unset !important;
background-color: transparent !important;
visibility: visible !important;
margin-top: 5px !important;
right: 0px !important;
left: unset !important;
}
.main-navigation ul ul.sub-menu li, .main-navigation ul ul.children li {
float: unset !important;
display: table-cell;
border-left: 11px solid transparent;
}
.main-navigation ul ul.sub-menu li, .main-navigation ul ul.children li {
width: unset !important;
}
.main-navigation ul ul.sub-menu li, .main-navigation ul ul.children li {
margin: 0;
padding-left: 5px;
position: relative;
}
.main-navigation ul ul.sub-menu a, .main-navigation ul ul.children a {
color: white;
display: block;
font-size: 16px;
}
</style>

JS Fiddle

我想在下拉列表中显示在一行中。您可以在我们显示在联系词下方的位置查看联系我们。请告诉我解决方案。

谢谢

Answer 1

如果我明白你在说什么，那么解决方案可能是 this .

.main-navigation ul li {
    /* ... */
    white-space: nowrap;
}

JSFiddle