我正在尝试制作一个响应式导航栏，当屏幕大小缩小时，部分项目可以滚动。它是这样的：
大屏幕：
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ FIXED ITEM + EMPTY SPACE + SCROLLABLE ITEM + FIXED ITEM +
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
小屏幕：
++++++++++++++++++++++++++++++++++++++++++
| FIXED ITEM | SCROLLABL... | FIXED ITEM |
+++++++++++++.<@@@@>--------.+++++++++++++
到目前为止，除了卷轴部分，我已经完成了所有的工作(见此处)。有什么想法吗？
您可以使用white-space: nowrap属性强制文本停留在一行上。
#navbar {
background-color: black;
color: white;
display: flex;
flex: 1;
justify-content: space-between;
}
.navbar-start {
margin: 10px;
}
.navbar-end {
margin: 10px;
}
.navbar-scrollable {
background: tomato;
margin: 10px;
overflow-x: auto;
white-space: nowrap;
}<nav id="navbar">
<div class="navbar-start">
FIXED
</div>
<div class="navbar-scrollable">
+++++++++++ SCROLLABLE CONTENT +++++++++++
</div>
<div class="navbar-end">
FIXED
</div>
</nav>body{ font-family: impact; }
.header {
background-color: blue;
color: white;
display: flex;
flex: 1;
justify-content: space-between;
padding: 10px 30px;
}
.logo {
font-size: 28px;
display: flex;
justify-content: center;
align-items: center;
}
.button {
width: 80px;
display: flex;
border-style: solid;
border-color: cornflowerblue;
border-width: 4px;
border-radius: 8px;
font-size: 18px;
justify-content: center;
align-items: center;
text-decoration: none;
color: white;
}
.button:hover{
color: red;
background-color: white;
}
.at-right{
font-size: 18px;
width: 380px;
height:32px;
background: rgb(0, 191, 255);
margin: 10px;
display: flex;
flex-direction: column;
cursor: pointer;
overflow-x: hidden;
overflow-y: scroll;
white-space: nowrap;
border-radius: 4px;
}
.scrollnav{ margin: 0 auto; }
.right-side{ display: flex; }
.at-right::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */}<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="header">
<div class="logo">LOGO</div>
<div class="right-side">
<div class="at-right">
<div class="scrollnav"> >>>>>> SCROLLABLE CONTENT <<<<<< </div>
<div class="scrollnav"> >>>>>> SCROLLABLE CONTENT <<<<<< </div>
<div class="scrollnav"> >>>>>> SCROLLABLE CONTENT <<<<<< </div>
<div class="scrollnav"> >>>>>> SCROLLABLE CONTENT <<<<<< </div>
<div class="scrollnav"> >>>>>> SCROLLABLE CONTENT <<<<<< </div>
<div class="scrollnav"> >>>>>> SCROLLABLE CONTENT <<<<<< </div>
<div class="scrollnav"> >>>>>> SCROLLABLE CONTENT <<<<<< </div>
<div class="scrollnav"> >>>>>> SCROLLABLE CONTENT <<<<<< </div>
</div>
<a class="button" href="https://google.com">Google</a>
</div>
</nav>
</body>
</html>试试这个例子
并查看"隐藏滚动条"、"仅y滚动"one_answers"换行"等的详细信息。