Question

我创建了一个与我的导航栏一起使用的预定div，但它会弄乱网站的其余格式。导航栏位于右上方，倾斜的div位于其下方，但它会弄乱网页上的其他所有内容。我一直在尝试一切都没有用。

Navbar HTML：

<template name="navbar">
  <div class="navbar">
    <ul>
      <li><a href="https://www.meteor.com/try">Contact</a></li>
      <li><a href="http://guide.meteor.com">Services</a></li>
      <li><a href="https://docs.meteor.com">Experience</a></li>
      <li><a href="https://forums.meteor.com" class="active">Home</a></li>
    </ul>
  </div>
</template>

Navbar CSS：

.navbar {
  position: relative;
  display: inline-block;
  padding: 0em 0em 1em 10em;
  overflow: hidden;
  color: #fff;
  float: right;
}

.navbar:after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #000;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(45deg);
  -ms-transform: skew(45deg);
  transform: skew(45deg);
  z-index: -1;
}

ul {
  list-style-type: none;
  margin-left: 100px;
  margin: 0;
  padding: 0;
  padding-top: 1em;
  padding-right: 1em;
  padding-bottom: 5px;
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: bolder;
  -webkit-font-smoothing: antialiased;
  z-index: -1;
}

li {
  margin-left: 1em;
  margin-right: 2em;
  float: right;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  -webkit-box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 8px 0.5px rgba(0,0,0,0.75);
  border: 5px;
  border-style: solid;
  border-radius: 10px;
  border-color: white;
  transition: background 0.2s ease,
              padding 0.8s linear;
}

li a:hover {
  background-color: #111;
}

.active {
  border-radius: 8px;
  border-color: white;
  background-color: #555;
}

＆＃34;山猫队服务＆＃34; Div HTML：

<body>
  <div id="nav">
    {{> navbar}}
  </div>
  <div id="center">
      <h1>Bobcats Services</h1>
      <h2>Everything you need!</h2>
  </div>
</body>

＆＃34;山猫队服务＆＃34; Div CSS：

/* CSS declarations go here */
html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;

  /*background-color: #0193ff;*/

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b7ea+0,009ec3+100;Blue+3D+%2315 */
  background: rgb(135,224,253); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */

  /* Image instead of standard color
  background-image: url("images/watch-plane.png");
  background-repeat: no-repeat;
  background-size: cover;
  */
}

#nav {

}

#center {
  width: 30%;
  padding-bottom: 2em;
  padding-top: 2em;
  margin: auto;
  margin-top: 2em;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-style: solid;
  border-radius: 5px;
  border-color: #008fc8;
  font-family: 'Open Sans', sans-serif;
}

Answer 1

使用float时，需要清除，以便下面的元素看起来正确。我在这里添加了：https://jsfiddle.net/44x11g34/一个例子。

我在两个主要区块之间添加了什么：

<div class="clear"></div>

和一些小css

.clear {
  clear: both;
}

希望这会对你有所帮助。

斜杆上的Navbar

1 个答案: