如何强制列表项显示在 CSS 的一行上？

Question

我将列表项用作 "fake menu items"，如下所示：

 <li>Match
    <ul class="second-level-menu">
      <li class="inlineblock" id="mniMatchWorkersWithJobLocs" name="mniMatchWorkersWithJobLocs">Workers with Jobs/Locations</li>
      <li id="mniMatchWorkersWithShifts" name="mniMatchWorkersWithShifts">Workers with Shifts</li>
    </ul>
  </li>

问题是较长的子菜单项，例如 "Workers with Jobs/Locations" 超过两行；我希望他们保持在一条线上。

我伪聪明地认为只需将 li 分配为 class:

就足够了

.inlineblock {
  display: inline-block;
}

...但它并没有削减芥末。我错过了什么或想错了什么？

更新

根据答案，我现在有了这个 CSS:

.inlineblock {
  display: inline-block;
}
li.inlineblock ul li{
  display: inline-block;
}

...还有这个 HTML:

  <li class="inlineblock">Match
    <ul class="second-level-menu">
      <li id="mniMatchWorkersWithJobLocs" name="mniMatchWorkersWithJobLocs">Workers with Jobs/Locations</li>
      <li id="mniMatchWorkersWithShifts" name="mniMatchWorkersWithShifts">Workers with Shifts</li>
    </ul>
  </li>

...但我仍然看到这个：

这是假菜单的完整 HTML：

<template name="mnuScheduler">
  <div class="grid">
    <div class="col-All">
      <nav>
        <ul class="top-level-menu">
          <li>Schedules
            <ul class="second-level-menu">
              <li id="mniOpenExisting" name="mniOpenExisting">Open Existing</li>
              <li>Create New...
                <ul class="third-level-menu">
                  <li id="mniCreateNewScheduleBasedOnExisting" name="mniCreateNewScheduleBasedOnExisting">Based on Existing</li>
                  <li id="mniCreateNewScheduleFromScratch" name="mniCreateNewScheduleFromScratch">From Scratch</li>
                </ul>
              </li>
              <li id="mniSaveCurrentSchedule" name="mniSaveCurrentSchedule">Save Current</li>
              <li id="mniEmailCurrentSchedule" name="mniEmailCurrentSchedule">Email Current</li>
              <li id="mniPrintCurrentSchedule" name="mniPrintCurrentSchedule">Print Current</li>
            </ul>
          </li>
          <li>Jobs/Locations
            <ul class="second-level-menu">
              <li id="mniAddNewJobLoc" name="mniAddNewJobLoc">Add New</li>
              <li id="mniViewOrEditJobLoc" name="mniViewOrEditJobLoc">View or Edit</li>
            </ul>
          </li>
          <li>Shifts
            <ul class="second-level-menu">
              <li id="mniAddNewShift" name="mniAddNewShift">Add New</li>
              <li id="mniViewOrEditShift" name="mniViewOrEditShift">View or Edit</li>
            </ul>
          </li>
          <li>Workers
            <ul class="second-level-menu">
              <li id="mniAddNewWorker" name="mniAddNewWorker">Add New</li>
              <li id="mniViewOrEditWorker" name="mniViewOrEditWorker">View or Edit</li>
            </ul>
          </li>
          <li class="inlineblock">Match
            <ul class="second-level-menu">
              <li id="mniMatchWorkersWithJobLocs" name="mniMatchWorkersWithJobLocs">Workers with Jobs/Locations</li>
              <li id="mniMatchWorkersWithShifts" name="mniMatchWorkersWithShifts">Workers with Shifts</li>
            </ul>
          </li>
          <li>Rules
            <ul class="second-level-menu">
              <li id="mniSetRules" name="mniSetRules">Establish/Maintain</li>
            </ul>
          </li>
          <li>Help
            <ul class="second-level-menu">
              <li id="mniAbout" name="mniAbout">About</li>
              <li id="mniHowTo" name="mniHowTo">How To...</li>
              <li id="mniContact" name="mniContact">Contact Us</li>
              <li id="mniAcquireLicense" name="mniAcquireLicense">Acquire License</li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>

更新 2

这个：

CSS:
.inlineblock {
  white-space: nowrap;
}
li.inlineblock ul li{
  display: inline-block;
}

HTML:

  <li class="inlineblock">Match
    <ul class="second-level-menu">
      <li id="mniMatchWorkersWithJobLocs" name="mniMatchWorkersWithJobLocs">Workers with Jobs/Locations</li>
      <li id="mniMatchWorkersWithShifts" name="mniMatchWorkersWithShifts">Workers with Shifts</li>
    </ul>
  </li>

...导致两个子菜单项出现在同一行（向前一步，向后两步）

这个：

/*.inlineblock {
  white-space: nowrap;
}
li.inlineblock ul li{
  display: inline-block;
}*/
li {
  white-space: nowrap;
}

...确实将两个菜单项放在单独的行中，但第一个是 "cut off"（显示为 "Workers with Jobs/Lo"）

更新 3

应 Joseph Marikle 的要求，这里是所有 CSS:

html {
  font-family:'Segoe UI Light', 'Bookman Old Style', Calibri, Candara, serif;
}
header {
  background: #d2edf4;
  background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
  padding: 20px 15px 15px 15px;
  position: relative;
}
/*body {
  font-family: 'Palatino Linotype', 'Bookman Antigua', Palatino, serif;
  background-color: lightyellow;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  font-size: 14px;

  width:80%;
  margin-left:auto;
  margin-right:auto;
  padding: 10px 50px 200px;
}*/
body {
  height: 100%;
  min-height: 100%;
  width: 80%;
  margin: 0 auto;
  padding: 50px 48px 0;
  line-height: 1;
  color: #333;
  background: #FFF;
  font-family: ff-tis-web-pro, 'Palatino Linotype', 'Bookman Antigua', Palatino, Georgia, serif;
  -webkit-text-size-adjust: 100%;
}
nav {
    background-color: forestgreen;
}
form {
    background-color: lightyellow;
}
h1 {
  color: navy;
  font-family: "Segoe UI", serif;
  font-size: 2.5em;
  margin: 0;
  margin-bottom: 10px;
  display: inline-block;
  margin-right: 1em;
}
h2 {
  font-family: 'Bookman Old Style', Verdana, sans-serif;
}
input:focus {
  background-color: lightyellow;
}
input:hover {
  background-color: azure;
}
table {
  width: 1200px;
  margin: 0 auto;
  background-color: azure;
  /*min-height: 100%;*/
  margin-top: 80px;
}
table, th, td {
    border: 1px solid navy;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    /*text-align: left;*/
}
input[type="text"] {
  margin-bottom: 4px;
}
input[type="submit"] {
  margin-top: 8px;
}
input[type="time"] {
  margin: 3px;
}
p {
  font-size: 14px;
}

[class*='col-'] {
    float: left;
    margin: 4px;
}
.grid {
  background: white;
}
.module {
  background: lightyellow;
}
.col-All {
    width: 90%;
}
.col-2-3 {
    width: 60%;
}
.col-1-3 {
    width: 30%;
}
.col-1-2 {
    width: 45%;
}
.col-1-4 {
    width: 22.5%;
}

/* for aligning input texts that follow labels on forms and such; can create other sizes too (label120,etc.) */
.label88 {
    width: 88px;
    display: inline-block;
}
.label144 {
    width: 144px;
    display: inline-block;
}
.joblocoptionallabel {
  width: 124px;
  display: inline-block;
}
/*.inlineblock {
  white-space: nowrap;
}
li.inlineblock ul li{
  display: inline-block;
}*/
li {
  white-space: nowrap;
}
.hide {
  visibility: hidden;
  display: none;
}
.smallcaps {
    font-variant: small-caps;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  background: lightyellow;
}
.dateLabel {
  font-size: 16px;
  font-family: Candara, 'Segoe UI', sans-serif;
  color: forestgreen;
}
.shiftLabel {
  font-size: 13px;
  font-family: Calibri, serif;
  color: red;
}
.jobLoc {
  margin-right: 16px;
  width: 115px;
}
.jobLocCount {
  width: 40px;
}
.trabajar {
  width: 159px;
  margin-right: 16px;
  margin-top: 4px;
}
.shortTextInput {
    width: 64px;
}
.floatleft {
    float: left;
    display: block;
}
/* Menu-specific styles/rules, adapted from  */
.third-level-menu {
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.third-level-menu > li {
    height: 30px;
    background: gray;
}
.third-level-menu > li:hover {
    background: white;
}
.second-level-menu {
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.second-level-menu > li {
    position: relative;
    height: 30px;
    background: orange;
    color: white;
}
.second-level-menu > li:hover {
    background: green;
}
.top-level-menu {
    list-style: none;
    padding: 0;
    margin-bottom: 12px;
    width: 100%;
    display:block;
    /*border: 1px; <= not working*/
}
.top-level-menu > li {
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: moccasin;
}
.top-level-menu > li:hover {
    background: lightgray;
}
.top-level-menu li:hover > ul {
    /* On hover, display the next level's menu */
    display: inline;
}
/* End of Menu-specific Styles */

Answer 1

你只需要给他们两个 class,

 <li>Match
    <ul class="second-level-menu">
      <li class="inlineblock" id="mniMatchWorkersWithJobLocs" name="mniMatchWorkersWithJobLocs">Workers with Jobs/Locations</li>
      <li class="inlineblock" id="mniMatchWorkersWithShifts" name="mniMatchWorkersWithShifts">Workers with Shifts</li>
    </ul>
  </li>

Answer 2

这种方式不再需要总是添加 class 并将列表中的所有 li 转换为内联。

HTML

<li class="inlineblock">Match
    <ul class="second-level-menu">
      <li id="mniMatchWorkersWithJobLocs" name="mniMatchWorkersWithJobLocs">Workers with Jobs/Locations</li>
      <li id="mniMatchWorkersWithShifts" name="mniMatchWorkersWithShifts">Workers with Shifts</li>
    </ul>
  </li>

CSS

li.inlineblock ul li{
  display: inline-block;
}

Code Example

如果你想让Match在同一条线上。

CSS

li.inlineblock,li.inlineblock ul,li.inlineblock ul li{
  display: inline-block;
}

Code Example

Answer 3

我建议将您的文本元素放在块元素内，例如锚点、段落、标签等...标签，否则您可以使用 css 来表示不间断的行：

li
{
   white-space:nowrap
}

Answer 4

在 Css 中使用 'white-space: nowrap;'。

.inlineblock {
    white-space: nowrap;
}

我建议以后不要养成使用 class 名称的习惯，因为这可能会导致混淆。 "foo" 和 "bar" 之类的名称始终有效。

Answer 5

您应该将 class 应用于列表本身，而不是每个列表项。

HTML:

<li class="inlineblock">Match
    <ul class="second-level-menu">
      <li id="mniMatchWorkersWithJobLocs" name="mniMatchWorkersWithJobLocs">Workers with Jobs/Locations</li>
      <li id="mniMatchWorkersWithShifts" name="mniMatchWorkersWithShifts">Workers with Shifts</li>
    </ul>
  </li>

这将确保所有项目都显示在块中。

CSS:

li.inlineblock ul li{
  display: inline-block;
}

这会将匹配列表中无序列表的列表项设置为内联显示，就像您希望看到的那样。

Answer 6

最初的问题是列表项环绕在菜单中，理想情况下应将全名保持在一行中。第一个提议的解决方案是应用 white-space:nowrap，但在这个特定实例中，原始发布者有一个菜单可以切断溢出（使用 overflow:hidden）。为了克服这个问题，只需更改嵌入容器列表（一个简单的 ul 元素）的宽度就简单多了。 150px 的宽度最初设置大概是为了确保菜单对于具有短名称的项目的子菜单项看起来是统一的。通过将宽度设置（或保留）为 auto 并给它一个 min-width: 100%;，可以在不丢失超宽列表宽度的情况下实现相同的效果。这是有效的，因为子菜单是相对于父 li 项的。 100% 将与父 li 的宽度相同。

TL;DR：总而言之，删除宽度并添加 100% 的最小宽度解决了 OP 的问题。

代码修改如下：

html {
  font-family:'Segoe UI Light', 'Bookman Old Style', Calibri, Candara, serif;
}
header {
  background: #d2edf4;
  background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
  padding: 20px 15px 15px 15px;
  position: relative;
}
/*body {
  font-family: 'Palatino Linotype', 'Bookman Antigua', Palatino, serif;
  background-color: lightyellow;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  font-size: 14px;

  width:80%;
  margin-left:auto;
  margin-right:auto;
  padding: 10px 50px 200px;
}*/
body {
  height: 100%;
  min-height: 100%;
  width: 80%;
  margin: 0 auto;
  padding: 50px 48px 0;
  line-height: 1;
  color: #333;
  background: #FFF;
  font-family: ff-tis-web-pro, 'Palatino Linotype', 'Bookman Antigua', Palatino, Georgia, serif;
  -webkit-text-size-adjust: 100%;
}
nav {
    background-color: forestgreen;
}
form {
    background-color: lightyellow;
}
h1 {
  color: navy;
  font-family: "Segoe UI", serif;
  font-size: 2.5em;
  margin: 0;
  margin-bottom: 10px;
  display: inline-block;
  margin-right: 1em;
}
h2 {
  font-family: 'Bookman Old Style', Verdana, sans-serif;
}
input:focus {
  background-color: lightyellow;
}
input:hover {
  background-color: azure;
}
table {
  width: 1200px;
  margin: 0 auto;
  background-color: azure;
  /*min-height: 100%;*/
  margin-top: 80px;
}
table, th, td {
    border: 1px solid navy;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    /*text-align: left;*/
}
input[type="text"] {
  margin-bottom: 4px;
}
input[type="submit"] {
  margin-top: 8px;
}
input[type="time"] {
  margin: 3px;
}
p {
  font-size: 14px;
}

[class*='col-'] {
    float: left;
    margin: 4px;
}
.grid {
  background: white;
}
.module {
  background: lightyellow;
}
.col-All {
    width: 90%;
}
.col-2-3 {
    width: 60%;
}
.col-1-3 {
    width: 30%;
}
.col-1-2 {
    width: 45%;
}
.col-1-4 {
    width: 22.5%;
}

/* for aligning input texts that follow labels on forms and such; can create other sizes too (label120,etc.) */
.label88 {
    width: 88px;
    display: inline-block;
}
.label144 {
    width: 144px;
    display: inline-block;
}
.joblocoptionallabel {
  width: 124px;
  display: inline-block;
}
/*.inlineblock {
  white-space: nowrap;
}
li.inlineblock ul li{
  display: inline-block;
}*/
li {
  white-space: nowrap;
}
.hide {
  visibility: hidden;
  display: none;
}
.smallcaps {
    font-variant: small-caps;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  background: lightyellow;
}
.dateLabel {
  font-size: 16px;
  font-family: Candara, 'Segoe UI', sans-serif;
  color: forestgreen;
}
.shiftLabel {
  font-size: 13px;
  font-family: Calibri, serif;
  color: red;
}
.jobLoc {
  margin-right: 16px;
  width: 115px;
}
.jobLocCount {
  width: 40px;
}
.trabajar {
  width: 159px;
  margin-right: 16px;
  margin-top: 4px;
}
.shortTextInput {
    width: 64px;
}
.floatleft {
    float: left;
    display: block;
}
/* Menu-specific styles/rules, adapted from  */
.third-level-menu {
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.third-level-menu > li {
    height: 30px;
    background: gray;
}
.third-level-menu > li:hover {
    background: white;
}
.second-level-menu {
    position: absolute;
    top: 30px;
    left: 0;
    /*width: 150px;*/
    min-width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.second-level-menu > li {
    position: relative;
    height: 30px;
    background: orange;
    color: white;
}
.second-level-menu > li:hover {
    background: green;
}
.top-level-menu {
    list-style: none;
    padding: 0;
    margin-bottom: 12px;
    width: 100%;
    display:block;
    /*border: 1px; <= not working*/
}
.top-level-menu > li {
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: moccasin;
}
.top-level-menu > li:hover {
    background: lightgray;
}
.top-level-menu li:hover > ul {
    /* On hover, display the next level's menu */
    display: inline;
}
/* End of Menu-specific Styles */

<div class="grid">
    <div class="col-All">
      <nav>
        <ul class="top-level-menu">
          <li>Schedules
            <ul class="second-level-menu">
              <li id="mniOpenExisting" name="mniOpenExisting">Open Existing</li>
              <li>Create New...
                <ul class="third-level-menu">
                  <li id="mniCreateNewScheduleBasedOnExisting" name="mniCreateNewScheduleBasedOnExisting">Based on Existing</li>
                  <li id="mniCreateNewScheduleFromScratch" name="mniCreateNewScheduleFromScratch">From Scratch</li>
                </ul>
              </li>
              <li id="mniSaveCurrentSchedule" name="mniSaveCurrentSchedule">Save Current</li>
              <li id="mniEmailCurrentSchedule" name="mniEmailCurrentSchedule">Email Current</li>
              <li id="mniPrintCurrentSchedule" name="mniPrintCurrentSchedule">Print Current</li>
            </ul>
          </li>
          <li>Jobs/Locations
            <ul class="second-level-menu">
              <li id="mniAddNewJobLoc" name="mniAddNewJobLoc">Add New</li>
              <li id="mniViewOrEditJobLoc" name="mniViewOrEditJobLoc">View or Edit</li>
            </ul>
          </li>
          <li>Shifts
            <ul class="second-level-menu">
              <li id="mniAddNewShift" name="mniAddNewShift">Add New</li>
              <li id="mniViewOrEditShift" name="mniViewOrEditShift">View or Edit</li>
            </ul>
          </li>
          <li>Workers
            <ul class="second-level-menu">
              <li id="mniAddNewWorker" name="mniAddNewWorker">Add New</li>
              <li id="mniViewOrEditWorker" name="mniViewOrEditWorker">View or Edit</li>
            </ul>
          </li>
          <li class="inlineblock">Match
            <ul class="second-level-menu">
              <li id="mniMatchWorkersWithJobLocs" name="mniMatchWorkersWithJobLocs">Workers with Jobs/Locations</li>
              <li id="mniMatchWorkersWithShifts" name="mniMatchWorkersWithShifts">Workers with Shifts</li>
            </ul>
          </li>
          <li>Rules
            <ul class="second-level-menu">
              <li id="mniSetRules" name="mniSetRules">Establish/Maintain</li>
            </ul>
          </li>
          <li>Help
            <ul class="second-level-menu">
              <li id="mniAbout" name="mniAbout">About</li>
              <li id="mniHowTo" name="mniHowTo">How To...</li>
              <li id="mniContact" name="mniContact">Contact Us</li>
              <li id="mniAcquireLicense" name="mniAcquireLicense">Acquire License</li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>

如何强制列表项显示在 CSS 的一行上？

How can I force a list item to display on one line with CSS?

html

css

html-lists

更新

更新 2

更新 3