Question

如您所见，容器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>

Answer 1

您的身高：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>

Answer 2

简单，简短，干净。您应该在栏内的元素上使用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>

如何使按钮组<div>固定在导航栏的底部？

2 个答案: