1
style.cssに指定したスタイルのページに次のdivが表示されない理由を理解できません。ヘッダは、問題がid="navigate"divが適切なCSSスタイルで表示されない
<div id="navigate">
<h5>Hello</h5>
</div>
とdivの中で、うまく表示されます「Hello」という単語だけが表示されます。
#navigate {
height: 200px;
width: 100%;
background-color:red;
}
私はそれが
のindex.php
<!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: [email protected]</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 © 2017</p>
</footer>
</body>
のstyle.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;
}
何らかの理由で '＃navigate'が' block'要素以外のものとして宣言されていますか？ 'display：block'を'＃navigate'に宣言すれば、意図した結果が得られますか？セレクタが適用されているかどうかを判断するもう1つの方法は、現在表示されている要素の唯一の目に見える部分であるため、 "赤"のような明白な色に変更してください。このルールが適用される場合は、セレクタが有効であり、その要素の表示タイプや、いくつかの追加ルールがないなどの問題がある可能性があります。 – UncaughtTypeError
それは解決です。表示するよう宣言すれば＃ブロックは#navigateに動作します。ありがとう、私はディスプレイがとても重要であることを知らなかった。 – sonam1790
表示ロールのリセットルールの配列に 'div'を追加して、他の' div'sでこの問題が発生しないようにすることもできます。 – UncaughtTypeError