Question

这通常是一件很简单的事情我想但由于某些原因我无法得到它。

正如你在下面看到的那样（片段），我有一个带有lis的ul，它固定在屏幕的左侧，作为小标签。当它们盘旋时，它们会扩展。我试图让它只是显示文本的直线而不是在它展开时不包装它。我该怎么办？

body {
  margin: 0;
  background-color: black;
  font-family: sans-serif;
}
#navTabs {
  width: 100%;
  padding-left: 0;
  position: fixed;
}
#navTabs li {
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  height: 75px;
  width: 10px;
  background-color: gray;
  margin-left: 0;
  position: relative;
  top: 100;
  overflow: hidden;
  transition: width .75s;
  list-style: none;
  word-wrap: none;
}
#navTabs li:hover {
  width: 250px;
}
#navTabs li h1 {
  position: relative;
  left: 30px;
}

<body>
  <ul id="navTabs">
    <li>
      <h1>HOME</h1>
    </li>
    <br>
    <li>
      <h1>NOT HOME</h1>
    </li>
  </ul>
</body>

Answer 1

您可以添加white-space: nowrap以防止文本换行到下一行。

body {
  margin: 0;
  background-color: black;
  font-family: sans-serif;
}
#navTabs {
  width: 100%;
  padding-left: 0;
  position: fixed;
}
#navTabs li {
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  height: 75px;
  width: 10px;
  background-color: gray;
  margin-left: 0;
  position: relative;
  top: 100;
  overflow: hidden;
  transition: width .75s;
  list-style: none;
  word-wrap: none;

  /* added this: */
  white-space: nowrap;
}
#navTabs li:hover {
  width: 250px;
}
#navTabs li h1 {
  position: relative;
  left: 30px;
}

<body>
  <ul id="navTabs">
    <li>
      <h1>HOME</h1>
    </li>
    <br>
    <li>
      <h1>NOT HOME</h1>
    </li>
  </ul>
</body>

Answer 2

尝试使用margin-left而不是宽度，如下所示：

＆＃13;

body {
  margin: 0;
  background-color: black;
  font-family: sans-serif;
}
#navTabs {
  width: 100%;
  padding-left: 0;
  position: fixed;
}
#navTabs li {
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  height: 75px;
  width: 250px;
  background-color: gray;
  margin-left: -230px;
  position: relative;
  top: 100;
  overflow: hidden;
  transition: all .75s;
  list-style: none;
  word-wrap: none;

}
#navTabs li:hover {
  width: 250px;
  margin-left: 0px;
}
#navTabs li h1 {
  position: relative;
  left: 30px;
}

＆＃13;

<body>
  <ul id="navTabs">
    <li>
      <h1>HOME</h1>
    </li>
    <br>
    <li>
      <h1>NOT HOME</h1>
    </li>
  </ul>
</body>

＆＃13;

Answer 3

您可以添加类似<nobr>NOT HOME</nobr>

的内容

＆＃13;

body {
  margin: 0;
  background-color: black;
  font-family: sans-serif;
}
#navTabs {
  width: 100%;
  padding-left: 0;
  position: fixed;
}
#navTabs li {
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  height: 75px;
  width: 10px;
  background-color: gray;
  margin-left: 0;
  position: relative;
  top: 100;
  overflow: hidden;
  transition: width .75s;
  list-style: none;
  word-wrap: none;
}
#navTabs li:hover {
  width: 250px;
}
#navTabs li h1 {
  position: relative;
  left: 30px;
}

＆＃13;

<body>
  <ul id="navTabs">
    <li>
      <h1>HOME</h1>
    </li>
    <br>
    <li>
      <h1><nobr>NOT HOME</nobr></h1>
    </li>
  </ul>
</body>

＆＃13;

Answer 4

Ashkay的回答如果正确的话。无论如何，你也可以操纵margin-left而不是width。然后，您将获得使用框移动文本的良好效果。

请参阅下面的代码段。

＆＃13;

body {
  margin: 0;
  background-color: black;
  font-family: sans-serif;
}
#navTabs {
  width: 100%;
  padding-left: 0;
  position: fixed;
}
#navTabs li {
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  height: 75px;
  width: 250px;
  background-color: gray;
  margin-left: -240px;
  position: relative;
  top: 100;
  overflow: hidden;
  transition: margin .75s;
  list-style: none;
  word-wrap: none;
}
#navTabs li:hover {
  margin-left: 0;
}
#navTabs li h1 {
  position: relative;
  left: 30px;
}

＆＃13;

<body>
  <ul id="navTabs">
    <li>
      <h1>HOME</h1>
    </li>
    <br>
    <li>
      <h1>NOT HOME</h1>
    </li>
  </ul>
</body>

＆＃13;

CSS自动换行？

4 个答案: