在#tabs下，我有许多不同的导航链接，它们彼此水平并排放置。当我将缩放比例设置为100％时，一些链接将被隐藏。如何在#tabs中添加水平滚动条以显示所有导航链接，而无需缩小以查看所有导航链接。
我尝试将overflow-x: auto和whitespace: nowrap添加到#tabs并没有运气。它会产生垂直溢出，但是我正在尝试实现水平溢出。
附上我的代码：
/*
~ Copyright (c) Summit Learning Management System (made by students, for students). 2020.
*/
html > body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-family: "Trebuchet MS", sans-serif;
}
#wrapper {
height: 100%;
min-height: 100vh;
overflow: hidden;
display: flex;
flex-wrap: nowrap;
color: #FFF;
}
/* Navigation */
#navigation {
min-height: 100%;
max-width: 40px;
background: #1B315E;
}
.spacer {
display: block;
margin: 120px 0 0 0;
}
#navigation > a {
display: block;
margin: 12px 0 12px 4px;
padding: 20px 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
text-align: center;
font-size: 18pt;
color: #FFF;
}
#navigation > a.selected {
color: #1B315E;
background: #FFF;
}
#navigation > a:not(.selected):hover {
color: #1B315E;
background: #FFF;
opacity: 0.75;
}
#navigation > .navLinks {
position: absolute;
bottom: 40px;
left: 2px;
}
#navigation > .navLinks > button {
cursor: inherit;
display: block;
margin: 8px 0 0 0;
outline: none;
border: none;
background: none;
font-size: 14pt;
color: #FFF;
}
/* Content */
#content {
display: flex;
flex-direction: column;
width: 80%;
min-height: 100%;
background: #FFF;
border: 2px solid #FFF;
border-top: none;
border-bottom: none;
}
/* Title */
#title {
float: left;
width: 100%;
font-size: 14pt;
color: #1B315E;
background: #FFF;
}
/* Toolbar */
#toolbar {
width: 100%;
height: 30px;
background: #F8F8F8;
border-bottom: 1px solid #DDD;
}
/* Tabs */
#tabs {
width: 100%;
height: 30px;
margin-top: auto;
background: #CCC;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.1) 4px, rgba(0,0,0,0) 6px);
}
#tabs > a {
float: left;
display: block;
margin: 0 0 0 4px;
padding: 4px 8px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-size: 10pt;
color: #1B315E;
}
#tabs > a.selected {
color: #1B315E;
background: #FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
#tabs > a:not(.selected):hover {
color: #1B315E;
opacity: 0.75;
background: #FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* Panel */
#panel {
display: flex;
flex-direction: column;
width: 20%;
min-height: 100%;
background: #FFF;
border-left: 6px solid #1B315E;
}<!DOCTYPE HTML>
<!--
~ Copyright (c) Summit Learning Management System (made by students, for students). 2020.
-->
<html lang="en-AU">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<title>List of programmes - Summit</title>
<script src="https://kit.fontawesome.com/bec3ffe91b.js" crossorigin="anonymous"></script> <!-- External Icon Stylesheet -->
<link rel="stylesheet" type="text/css" href="/CSS/setting.css"> <!-- Internal Stylesheet -->
<link rel="stylesheet" type="text/css" href="/CSS/styling.css"> <!-- Internal Stylesheet -->
<link rel="shortcut icon" href="#"> <!-- Favicon -->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<div id="navigation">
<div class="spacer"></div>
<a href="#" title="Home workspace"><i class="fal fa-home"></i></a>
<a href="#" title="Learning workspace" class="selected"><i class="fal fa-book"></i></a>
<a href="#" title="Student management workspace"><i class="fal fa-user"></i></a>
<a href="#" title="Portal workspace"><i class="fal fa-globe"></i></a>
<a href="#" title="Administration workspace"><i class="fal fa-cog"></i></a>
<div class="navLinks">
<button title="Quick links"><i class="fal fa-bookmark"></i></button>
<button title="Log out"><i class="fal fa-sign-out-alt"></i></button>
</div>
</div>
<!-- Content -->
<div id="content">
<!-- Title -->
<div id="title"><i class="fal fa-list"></i> List of programmes</div>
<!-- Toolbar -->
<div id="toolbar"></div>
<!-- Tabs -->
<div id="tabs">
<a href="#" title="Academic reports"><i class="fal fa-file-chart-line"></i> Academic Reports</a>
<a href="#" title="Attendance"><i class="fal fa-at"></i> Attendance</a>
<a href="#" title="Summit messages"><i class="fal fa-comments"></i> Summit Messages</a>
<a href="#" title="Marks book"><i class="fal fa-percentage"></i> Marks Book</a>
<a href="#" title="Notices"><i class="fal fa-newspaper"></i> Notices</a>
<a href="#" title="Programme"><i class="fal fa-book-open"></i> Programme</a>
<a href="#" title="List of programmes" class="selected"><i class="fal fa-list"></i> List of Programmes</a>
<a href="#" title="Timetable"><i class="fal fa-calendar-alt"></i> Timetable</a>
</div>
</div>
<!-- Panel -->
<div id="panel"></div>
</div>
</body>
</html>
感谢您的帮助。谢谢汤姆
答案 0 :(得分：1)
在此处更改CSS
#tabs {
width: 100%;
height: 30px;
margin-top: auto;
background: #CCC;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.1) 4px, rgba(0,0,0,0) 6px);
white-space: nowrap; /*Add Here*/
overflow: auto; /*Add Here*/
}
#tabs > a {
float:left; /*Remove This*/
display: inline-block; /*Add Here*/
margin: 0 0 0 4px;
padding: 4px 8px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-size: 10pt;
color: #1B315E;
}
/*
~ Copyright (c) Summit Learning Management System (made by students, for students). 2020.
*/
html > body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-family: "Trebuchet MS", sans-serif;
}
#wrapper {
height: 100%;
min-height: 100vh;
overflow: hidden;
display: flex;
flex-wrap: nowrap;
color: #FFF;
}
/* Navigation */
#navigation {
min-height: 100%;
max-width: 40px;
background: #1B315E;
}
.spacer {
display: block;
margin: 120px 0 0 0;
}
#navigation > a {
display: block;
margin: 12px 0 12px 4px;
padding: 20px 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
text-align: center;
font-size: 18pt;
color: #FFF;
}
#navigation > a.selected {
color: #1B315E;
background: #FFF;
}
#navigation > a:not(.selected):hover {
color: #1B315E;
background: #FFF;
opacity: 0.75;
}
#navigation > .navLinks {
position: absolute;
bottom: 40px;
left: 2px;
}
#navigation > .navLinks > button {
cursor: inherit;
display: block;
margin: 8px 0 0 0;
outline: none;
border: none;
background: none;
font-size: 14pt;
color: #FFF;
}
/* Content */
#content {
display: flex;
flex-direction: column;
width: 80%;
min-height: 100%;
background: #FFF;
border: 2px solid #FFF;
border-top: none;
border-bottom: none;
}
/* Title */
#title {
float: left;
width: 100%;
font-size: 14pt;
color: #1B315E;
background: #FFF;
}
/* Toolbar */
#toolbar {
width: 100%;
height: 30px;
background: #F8F8F8;
border-bottom: 1px solid #DDD;
}
/* Tabs */
#tabs {
width: 100%;
height: 30px;
margin-top: auto;
background: #CCC;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.1) 4px, rgba(0,0,0,0) 6px);
white-space: nowrap;
overflow: auto;
}
#tabs > a {
display: inline-block;
margin: 0 0 0 4px;
padding: 4px 8px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-size: 10pt;
color: #1B315E;
}
#tabs > a.selected {
color: #1B315E;
background: #FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
#tabs > a:not(.selected):hover {
color: #1B315E;
opacity: 0.75;
background: #FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* Panel */
#panel {
display: flex;
flex-direction: column;
width: 20%;
min-height: 100%;
background: #FFF;
border-left: 6px solid #1B315E;
}<!DOCTYPE HTML>
<!--
~ Copyright (c) Summit Learning Management System (made by students, for students). 2020.
-->
<html lang="en-AU">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<title>List of programmes - Summit</title>
<script src="https://kit.fontawesome.com/bec3ffe91b.js" crossorigin="anonymous"></script> <!-- External Icon Stylesheet -->
<link rel="stylesheet" type="text/css" href="/CSS/setting.css"> <!-- Internal Stylesheet -->
<link rel="stylesheet" type="text/css" href="/CSS/styling.css"> <!-- Internal Stylesheet -->
<link rel="shortcut icon" href="#"> <!-- Favicon -->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<div id="navigation">
<div class="spacer"></div>
<a href="#" title="Home workspace"><i class="fal fa-home"></i></a>
<a href="#" title="Learning workspace" class="selected"><i class="fal fa-book"></i></a>
<a href="#" title="Student management workspace"><i class="fal fa-user"></i></a>
<a href="#" title="Portal workspace"><i class="fal fa-globe"></i></a>
<a href="#" title="Administration workspace"><i class="fal fa-cog"></i></a>
<div class="navLinks">
<button title="Quick links"><i class="fal fa-bookmark"></i></button>
<button title="Log out"><i class="fal fa-sign-out-alt"></i></button>
</div>
</div>
<!-- Content -->
<div id="content">
<!-- Title -->
<div id="title"><i class="fal fa-list"></i> List of programmes</div>
<!-- Toolbar -->
<div id="toolbar"></div>
<!-- Tabs -->
<div id="tabs">
<a href="#" title="Academic reports"><i class="fal fa-file-chart-line"></i> Academic Reports</a>
<a href="#" title="Attendance"><i class="fal fa-at"></i> Attendance</a>
<a href="#" title="Summit messages"><i class="fal fa-comments"></i> Summit Messages</a>
<a href="#" title="Marks book"><i class="fal fa-percentage"></i> Marks Book</a>
<a href="#" title="Notices"><i class="fal fa-newspaper"></i> Notices</a>
<a href="#" title="Programme"><i class="fal fa-book-open"></i> Programme</a>
<a href="#" title="List of programmes" class="selected"><i class="fal fa-list"></i> List of Programmes</a>
<a href="#" title="Timetable"><i class="fal fa-calendar-alt"></i> Timetable</a>
</div>
</div>
<!-- Panel -->
<div id="panel"></div>
</div>
</body>
</html>
答案 1 :(得分：0)
您可以使用flexbox轻松完成此操作。
赋予#tab一个display:flex属性，而overflow-x: auto可以解决问题。
我还从您的示例中删除了margin-top: auto。
/*
~ Copyright (c) Summit Learning Management System (made by students, for students). 2020.
*/
html > body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-family: "Trebuchet MS", sans-serif;
}
#wrapper {
height: 100%;
min-height: 100vh;
overflow: hidden;
display: flex;
flex-wrap: nowrap;
color: #FFF;
}
/* Navigation */
#navigation {
min-height: 100%;
max-width: 40px;
background: #1B315E;
}
.spacer {
display: block;
margin: 120px 0 0 0;
}
#navigation > a {
display: block;
margin: 12px 0 12px 4px;
padding: 20px 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
text-align: center;
font-size: 18pt;
color: #FFF;
}
#navigation > a.selected {
color: #1B315E;
background: #FFF;
}
#navigation > a:not(.selected):hover {
color: #1B315E;
background: #FFF;
opacity: 0.75;
}
#navigation > .navLinks {
position: absolute;
bottom: 40px;
left: 2px;
}
#navigation > .navLinks > button {
cursor: inherit;
display: block;
margin: 8px 0 0 0;
outline: none;
border: none;
background: none;
font-size: 14pt;
color: #FFF;
}
/* Content */
#content {
display: flex;
flex-direction: column;
width: 80%;
min-height: 100%;
background: #FFF;
border: 2px solid #FFF;
border-top: none;
border-bottom: none;
}
/* Title */
#title {
float: left;
width: 100%;
font-size: 14pt;
color: #1B315E;
background: #FFF;
}
/* Toolbar */
#toolbar {
width: 100%;
height: 30px;
background: #F8F8F8;
border-bottom: 1px solid #DDD;
}
/* Tabs */
#tabs {
min-width: 100%;
background: #CCC;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.1) 4px, rgba(0,0,0,0) 6px);
display: flex;
overflow-x: auto;
align-items: center;
}
#tabs > a {
margin: 0 0 0 4px;
padding: 4px 8px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-size: 10pt;
color: #1B315E;
}
#tabs > a.selected {
color: #1B315E;
background: #FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
#tabs > a:not(.selected):hover {
color: #1B315E;
opacity: 0.75;
background: #FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* Panel */
#panel {
display: flex;
flex-direction: column;
width: 20%;
min-height: 100%;
background: #FFF;
border-left: 6px solid #1B315E;
}<!DOCTYPE HTML>
<!--
~ Copyright (c) Summit Learning Management System (made by students, for students). 2020.
-->
<html lang="en-AU">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<title>List of programmes - Summit</title>
<script src="https://kit.fontawesome.com/bec3ffe91b.js" crossorigin="anonymous"></script> <!-- External Icon Stylesheet -->
<link rel="stylesheet" type="text/css" href="/CSS/setting.css"> <!-- Internal Stylesheet -->
<link rel="stylesheet" type="text/css" href="/CSS/styling.css"> <!-- Internal Stylesheet -->
<link rel="shortcut icon" href="#"> <!-- Favicon -->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<div id="navigation">
<div class="spacer"></div>
<a href="#" title="Home workspace"><i class="fal fa-home"></i></a>
<a href="#" title="Learning workspace" class="selected"><i class="fal fa-book"></i></a>
<a href="#" title="Student management workspace"><i class="fal fa-user"></i></a>
<a href="#" title="Portal workspace"><i class="fal fa-globe"></i></a>
<a href="#" title="Administration workspace"><i class="fal fa-cog"></i></a>
<div class="navLinks">
<button title="Quick links"><i class="fal fa-bookmark"></i></button>
<button title="Log out"><i class="fal fa-sign-out-alt"></i></button>
</div>
</div>
<!-- Content -->
<div id="content">
<!-- Title -->
<div id="title"><i class="fal fa-list"></i> List of programmes</div>
<!-- Toolbar -->
<div id="toolbar"></div>
<!-- Tabs -->
<div id="tabs">
<a href="#" title="Academic reports"><i class="fal fa-file-chart-line"></i> Academic Reports</a>
<a href="#" title="Attendance"><i class="fal fa-at"></i> Attendance</a>
<a href="#" title="Summit messages"><i class="fal fa-comments"></i> Summit Messages</a>
<a href="#" title="Marks book"><i class="fal fa-percentage"></i> Marks Book</a>
<a href="#" title="Notices"><i class="fal fa-newspaper"></i> Notices</a>
<a href="#" title="Programme"><i class="fal fa-book-open"></i> Programme</a>
<a href="#" title="List of programmes" class="selected"><i class="fal fa-list"></i> List of Programmes</a>
<a href="#" title="Timetable"><i class="fal fa-calendar-alt"></i> Timetable</a>
</div>
</div>
<!-- Panel -->
<div id="panel"></div>
</div>
</body>
</html>