页脚中的内联文本

Question

我想在一行中显示子类别的名称。问题是当子类别的名称由2个单词组成时，总是以2行显示。

代码：

＆＃13;

＆＃13;

.Footer {
  width: 100%;
  display: inline-block;
  background-color: #d0d0d0;
  border-top: 20px solid #0092c2;
}

ul {
  width: 100%;
  list-style: none;
}

ul li {
  margin: 0 auto;
  float: left;
  width: 25%;
  font-weight: bold;
  text-align: center;
}

ul li ul {
  padding: 0;
}

ul li ul li {
  float: none;
  padding: 5px 0;
  font-weight: normal;
}

＆＃13;

<div class="Footer">
  <ul>
    <li>Heading1
      <ul>
        <li>adfghjklhfds asasasasa</li>
        <li>sasasfdfdfdr asasasasfdfddsds</li>
      </ul>
    </li>

    <li>Heading2
      <ul>
      </ul>
    </li>

    <li>Heading3
      <ul>
        <li>wqwqwqwqww qwqwqwqwqwqwq</li>
        <li>dsdsdsdsd dsdsdsdsdswqw</li>
      </ul>
    </li>

    <li>Heading4
      <ul>
        <li>asasasasqwwq wqwqwqwqwqw</li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将display:inline用于ul li ul li css

＆＃13;

＆＃13;

.Footer {
  width: 100%;
  display: inline-block;
  background-color: #d0d0d0;
  border-top: 20px solid #0092c2;
}

ul {
  width: 100%;
  list-style: none;
}

ul li {
  margin: 0 auto;
  float: left;
  width: 25%;
  font-weight: bold;
  text-align: center;
}

ul li ul {
  padding: 0;
}

ul li ul li {
  float: none;
  padding: 5px 0;
  font-weight: normal;
 display:inline;
}

＆＃13;

<div class="Footer">
  <ul>
    <li>Heading1
      <ul>
        <li>adfghjklhfds asasasasa</li>
        <li>sasasfdfdfdr asasasasfdfddsds</li>
      </ul>
    </li>

    <li>Heading2
      <ul>
      </ul>
    </li>

    <li>Heading3
      <ul>
        <li>wqwqwqwqww qwqwqwqwqwqwq</li>
        <li>dsdsdsdsd dsdsdsdsdswqw</li>
      </ul>
    </li>

    <li>Heading4
      <ul>
        <li>asasasasqwwq wqwqwqwqwqw</li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用flexbox并为每个子项选择min-width，以防止文本换行新行

＆＃13;

＆＃13;

footer {
  width: 100%;
  display: flex;
  flex-direction: row wrap;
  justify-content: space-between;
  background-color: #d0d0d0;
  border-top: 20px solid #0092c2;
}

footer>div {
  display: flex;
  flex-direction: column;
}

footer>div>span {
  text-align: center;
}

footer>div>span:first-child {
  font-weight: bold;
}

＆＃13;

<footer>
  <div>
    <span>Heading1</span>
    <span>adfghjklhfds asasasasa</span>
    <span>sasasfdfdfdr asasasasfdfddsds</span>
  </div>
  <div>
    <span>Heading2</span>
  </div>
  <div>
    <span>Heading3</span>
    <span>wqwqwqwqww qwqwqwqwqwqwq</span>
    <span>dsdsdsdsd dsdsdsdsdswqw</span>
  </div>
  <div>
    <span>Heading4</span>
    <span>asasasasqwwq wqwqwqwqwqw</span>
  </div>
</footer>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要在子width上重置li。他们也是25％，这使得它们非常小。 在更新宽度重置之前添加一个框阴影或背景以查看它们的位置，以了解文本包裹速度如此之快。

＆＃13;

＆＃13;

.Footer {
  width: 100%;
  display: inline-block;
  background-color: #d0d0d0;
  border-top: 20px solid #0092c2;
}

ul {
  width: 100%;
  list-style: none;
}

ul li {
  margin: 0 auto;
  float: left;
  width: 25%;
  font-weight: bold;
  text-align: center;
}

ul li ul {
  padding: 0;
}
ul li ul li {
  float: none;
  width:auto;/* ====== reset width here */
  padding: 5px 0;
  font-weight: normal;
}

＆＃13;

<div class="Footer">
  <ul>
    <li>Heading1
      <ul>
        <li>adfghjklhfds asasasasa</li>
        <li>sasasfdfdfdr asasasasfdfddsds</li>
      </ul>
    </li>

    <li>Heading2
      <ul>
      </ul>
    </li>

    <li>Heading3
      <ul>
        <li>wqwqwqwqww qwqwqwqwqwqwq</li>
        <li>dsdsdsdsd dsdsdsdsdswqw</li>
      </ul>
    </li>

    <li>Heading4
      <ul>
        <li>asasasasqwwq wqwqwqwqwqw</li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;