html - CSS 防止导航栏重叠
问题描述
我有个问题。我正在使用以下代码:
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fas {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}
.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}
.main-menu {
background:#212121;
border-right:1px solid #e5e5e5;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-size: 16px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
}
.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
.no-touch .scrollable.hover {
overflow-y:hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}
a:hover,a:focus {
text-decoration:none;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#5fa2db;
}
.area {
position: relative;
background: #e2e2e2;
width: 100%;
height: 100%;
}
@font-face {
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
<body>
<div class="area">
<div id="topBar">
<select id="comboBoxAgent" onchange="changeAgent()"></select>
<select id="comboBoxCoin1" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<select id="comboBoxCoin2" class="comboBoxCoin" onchange="loadCoinPriceData()">
<option value="">-</option>
</select>
<div id="toggleSwitch">
<div class="radio-group">
<input type="radio" id="environmentReal" name="environment" checked="checked" value="Real"><label for="option-one">Real</label>
<input type="radio" id="environmentSim" name="environment" value="Simulator"><label for="option-two">Sim</label>
</div>
</div>
<div id="simulatorControls" style="display: none;">
<input type="text" id="txtStartDateTime" placeholder="Start (0000-00-00 00:00:00)">
<button id="btnToggleSimulator" onClick="toggleSimulator()"></button>
<label id="txtSimulatorProgress" class="simulator-progress"></label>
</div>
<button id="btnToggleAgent" onClick="toggleAgent()"></button>
</div>
</div>
<nav class="main-menu">
<ul>
<li>
<a href="index.php">
<i class="fas fa-home"></i>
<span class="nav-text">Dashboard</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fas fa-undo"></i>
<span class="nav-text">Reset</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fas fa-user-cog"></i>
<span class="nav-text">Admin panel</span>
</a>
</li>
<ul class="logout">
<li>
<a href="logout.php">
<i class="fas fa-sign-out-alt"></i>
<span class="nav-text">
Logout
</span>
</a>
</li>
</ul>
</nav>
</body>
但正如您所见,导航栏现在与内容重叠。我已经尝试设置area
to的位置relative
,但这并没有做任何事情。CSS 不是我最喜欢做的事情,我不知道如何在导航栏旁边设置内容。我想要的是导航栏在折叠时不会与内容重叠,但它可以折叠内容,所以当导航栏很小时,该区域中的所有内容都是可见的。
我怎样才能做到这一点?
解决方案
只需将菜单宽度的 padding-left 添加到 .area 即可。我想你放了 60px;
还添加 box-sizing: border-box; 如果内容移动到右侧的正文之外,则转到 .area。
您应该考虑添加 box-sizing:border-box; 像这样对你的所有元素:
* { box-sizing: border-box; }
Box-sizing 属性改变了元素宽度和高度的计算方式。设置为边框状态,即填充和边框宽度将保持在您设置的 100% 宽度内。
我会将您推荐给 w3school 以获取更多信息:w3schools.com/cssref/css3_pr_box-sizing.asp
推荐阅读
- javascript - 单击即可更新所有按钮。反应JS
- python - DataFrame以一列作为键,多列作为值进行dict
- variables - 在 Delphi 中处理多个相似的变量/对象
- php - 2195端口是强制要求打开的吗?IOS 推送通知在 php 中不起作用,而 Ios 推送通知在 laravel 中没有进入移动设备
- reactjs - 通过 map() 数组创建真 / 假 - 不可见 / 可见按钮 React.js 功能组件
- azure-data-factory - 数据集覆盖数据库表 - Azure 数据工厂
- quarkus - 如何将列表传递给preparedQuery
- python - 如何在matplotlib中使用两种不同颜色的正负词绘制单词图
- python - “餐厅”对象没有属性“添加服务”
- firefox - AES GCM 仅解密 Firefox 错误:“DOMException: The operation failed for an operation-specific reason”,但 Chromium OK