我想这通常是一件简单的事情，但由于某种原因，我无法实现。
正如你在下面看到的(片段)，我有一个带有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>您可以添加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>尝试使用左边距而不是宽度，如下所示：
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;
}<body>
<ul id="navTabs">
<li>
<h1>HOME</h1>
</li>
<br>
<li>
<h1>NOT HOME</h1>
</li>
</ul>
</body>您可以添加类似<nobr>NOT HOME</nobr>的内容
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><nobr>NOT HOME</nobr></h1>
</li>
</ul>
</body>Ashkay的答案如果正确。无论如何，您也可以操作margin-left而不是width。然后你将实现移动文本框的良好效果。
请参阅下面的片段。
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;
}<body>
<ul id="navTabs">
<li>
<h1>HOME</h1>
</li>
<br>
<li>
<h1>NOT HOME</h1>
</li>
</ul>
</body>