I下記のHTMLコードを持っている:HTML&CSSタグ
body {
margin: 0;
}
header {
background: #999;
color: white;
padding: 15px 15px 0 15px;
}
header h1 {
margin: 0;
display: inline;
}
nav ul{
margin: 0px;
display: inline;
}
nav ul li{
background: black;
color: white;
display: inline-block;
list-style-type: none;
padding: 5px 15px;
margin: 0;
}
nav ul li a{
color:white;
}
<!doctype html>
<html>
<head>
<title>CSS Layouts</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<header>
<h1>My Page</h1>
<nav>
<ul>
<li><a href="#"></a>Home</li>
<li><a href="#"></a>Blog</li>
<li><a href="#"></a>About</li>
<li><a href="#"></a>Contact</li>
<li><a href="#"></a>Links</li>
</ul>
</nav>
</header>
<div class="row">
<div class="col">col1</div>
<div class="col">col2</div>
<div class="col">col3</div>
</div>
<footer>2016 My Site</footer>
</body>
</html>
私の挑戦はCSSで述べたように "マイページ" 行でH1を、作ることです
header h1 {
margin:0;
display: inline;
}
順不同リストにインラインで行くにはH1ヘッダ「マイページ」を得るために、私はの下にHTMLにH1を移動する必要があります3210オープニングタグ(これはヘッダーの開始タグの下にあるのとは対照的です)が、インラインになる理由はわかりませんが、現在のようにそのまま残してしまえばそれはできません。
次のしている場合には、CSSでというのが私の理解です:
header h1{
some styling here;
}
...ヘッダーの下に任意のH1さんは、現在、私のコードで何が起こっていないことが、影響を受けるであろうということ。
あなたの 'nav'は' block'です。それがブラウザのデフォルトです。あなたはそれを 'インライン'にするべきです – pol