Question

我无法理解为什么以下div没有出现在style.css中我给出的样式的页面中。标题显示正常，问题出在id="navigate"

的div中

<div id="navigate">
    <h5>Hello</h5>
</div>

考虑到我使用的CSS，我预计它的宽度为100％，高度为200px，红色背景，但只显示“Hello”字样。

#navigate {
      height: 200px;
      width: 100%;
      background-color:red;
    }

我发布了整个代码，以防它提供线索

CSS

/* http://meyerweb.com/eric/tools/css/reset/
       v2.0 | 20110126
       License: none (public domain)
    */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  /*vertical-align: baseline;*/
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* ~~~~~~~~ Global ~~~~~~~~ */

.container {
  /*class*/
  background: #35424a;
  width: 70%;
  /*In order to be responsive we will use percentage*/
  height: 50px;
  margin: auto;
  /*This will move it to the middle wow wow wow*/
  overflow: hidden;
  /*if something goes outside of a div i don't want a scrollbar to appear, i want it
       to be hidden*/
}


/* ~~~~~~~~ Header ~~~~~~~~~~*/

header {
  position: inherit;
  color: #ffffff;
  /* color of text */
  min-height: 30px;
  /*min-height instead of height, that way when it's responsive and the screen is
       smaller and the text grow or the menu goes in the next line we want the high to adjust*/
}

header a {
  display: table-cell;
  vertical-align: middle;
  float: left;
  padding-top: 5px;
}

header form {
  float: left;
  vertical-align: middle;
  padding-top: 10px;
  padding-left: 5px;
}

#nav-search {
  text-align: center;
  width: 150px;
  height: 30px;
}

header .info {
  display: table-cell;
  padding-left: 100px;
  padding-top: 20px;
}

header h5 {
  display: table-cell;
  padding-left: 20px;
}

header .btn-success {
  float: right;
  top: 50%;
  transform: translateY(-80%);
  margin-left: 5px;
}


/* ~~~~~~~~ Navigate ~~~~~~~~~~*/

#navigate {
  height: 200px;
  width: 100%;
  background-color: red;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="Test site">
  <meta name="keywords" content="test, site, whatever">
  <meta name="author" content="Sonam1790">
  <title>Elite Properties</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <header>
    <div class="container">
      <a href="index.html" class="logo">
        <img src="CSS/small_logo.png" alt="Test Site" />
      </a>
      <form method="GET" action="index.php">
        <input id="nav-search" type="text" name="search" placeholder="Search" />
      </form>
      <div class="info">
        <h5>tel: 123456789</h5>
        <h5>fax: +090 44 12943</h5>
        <h5>email: sonam1790@gmail.com</h5>
      </div>
      <button type="button" class="btn-success">Register</button>
      <button type="button" class="btn-success">Sign in</button>
    </div>
  </header>
  <div id="navigate">
    <h5>Hello</h5>
  </div>
  <footer>
    <p>Test site, Copyright &copy; 2017</p>
  </footer>
</body>

Answer 1

您的h5样式将覆盖您发布的代码中的div样式。一个简单的解决方案是为#navigate div指定h5样式：

#navigate h5 {
      height: 200px;
      width: 100%;
      background-color:red;
    }

div没有出现适当的css样式

1 个答案: