如您所见,容器div设置为position: relative
,而btn-group
本身的位置为absolute
,但它仍然令人讨厌到导航栏div的顶部。 / p>
.btn-group button{
background-color: #FFB48F;
color: #2D283E;
display: block;
text-align: center;
text-decoration: none;
font-size: 12px;
width: 100px;
height: 70%;
border: none;
border-left: 1px solid #2D283E;
border-right: 1px solid #2D283E;
float: left;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.btn-group button:not(:last-child) {
border-right: none; /* Prevent double borders */
border-top-left-radius: none;
}
.btn-group button:not(:first-child) {
border-right: none; /* Prevent double borders */
border-top-left-radius: none;
}
/* Add a background color on hover */
.btn-group button:hover {
color: #FFB48F;
background-color: rgb(243, 244, 247);
}
.btn-group button:focus{
outline: 0;
}
/* NEW STUFF HERE */
.topnav{
background-color: #2D283E;
color: rgb(91, 27, 143);
text-decoration: bold;
font-size: 12pt;
overflow: hidden;
height: 50px;
border-bottom: 2px solid #FFB48F;
position: fixed;
top: 0;
width: 100%;
z-index: 2;
clear:both;
}
.row:after {
content: "";
display: table;
clear: both;
}
.titlebox{
background-color: #FFB48F;
margin-left: 20px;
color: #2D283E;
width: 13%;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
height: 70%;
float: left;
bottom: 0;
position: absolute;
padding: 3px;
padding-top: 0;
text-align: center;
}
.titlebox h1{
font-size: 16px;
}
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
padding-top: 50px; /* this stops divs from clipping navbar */
}
.row{
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="topnav">
<div class="titlebox"><h1>title 0.1 beta</h1></div>
<div style="height: 100%; position: relative;">
<div class="btn-group" style="height: 100%; right:0; bottom: 0; position: absolute;">
<button href="#">Title</button>
<button href="#">Admin</button>
<button href="#">Logout</button>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:0)
您的身高:100%;样式干扰您想要的样式。为了使按钮具有一定的呼吸空间,请给其填充一些空间。对类样式“ .btn-group button {”
进行了更改
.btn-group button {
background-color: #FFB48F;
color: #2D283E;
display: block;
text-align: center;
text-decoration: none;
font-size: 12px;
width: 100px;
height: 70%;
border: none;
border-left: 1px solid #2D283E;
border-right: 1px solid #2D283E;
float: left;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
padding: 8px 12px;
}
.btn-group button:not(:last-child) {
border-right: none;
/* Prevent double borders */
border-top-left-radius: none;
}
.btn-group button:not(:first-child) {
border-right: none;
/* Prevent double borders */
border-top-left-radius: none;
}
/* Add a background color on hover */
.btn-group button:hover {
color: #FFB48F;
background-color: rgb(243, 244, 247);
}
.btn-group button:focus {
outline: 0;
}
/* NEW STUFF HERE */
.topnav {
background-color: #2D283E;
color: rgb(91, 27, 143);
text-decoration: bold;
font-size: 12pt;
overflow: hidden;
height: 50px;
border-bottom: 2px solid #FFB48F;
position: fixed;
top: 0;
width: 100%;
z-index: 2;
clear: both;
}
.row:after {
content: "";
display: table;
clear: both;
}
.titlebox {
background-color: #FFB48F;
margin-left: 20px;
color: #2D283E;
width: 13%;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
height: 70%;
float: left;
bottom: 0;
position: absolute;
padding: 3px;
padding-top: 0;
text-align: center;
}
.titlebox h1 {
font-size: 16px;
}
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
padding-top: 50px;
/* this stops divs from clipping navbar */
}
.row {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="topnav">
<div class="titlebox">
<h1>title 0.1 beta</h1>
</div>
<div style="height: 100%; position: relative;">
<div class="btn-group" style="right:0; bottom: 0; position: absolute;">
<button href="#">Title</button>
<button href="#">Admin</button>
<button href="#">Logout</button>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分:0)
简单,简短,干净。您应该在栏内的元素上使用margin-top。
* {
box-sizing: border-box
font-family: serif;
}
header {
height: 50px;
background-color: #2D283E;
border-bottom: 4px solid #ffb48f;
}
div#title-box, nav {
display: inline-block;
margin-top: 15px;
}
div#title-box {
margin-left: 20px;
}
nav {
float: right;
margin-right: 20px;
}
div#title-box > h1, nav > button {
display: inline-block;
margin: 0;
padding: 5px 10px;
border-radius: 5px 5px 0 0;
background-color: #ffb48f;
color: #000;
line-height: 25px;
font-size: 1em;
font-family: Arial;
}
nav > button {
border: none;
}
nav > button:hover {
background-color: #fff;
color: #ffb48f;
}
<header>
<div id="title-box">
<h1>Title</h1>
</div>
<nav>
<button href="#">MenuR 1</button>
<button href="#">MenuR 2</button>
<button href="#">MenuR 3</button>
</nav>
</header>