2016-11-03 6 views
2

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さんは、現在、私のコードで何が起こっていないことが、影響を受けるであろうということ。

+0

あなたの 'nav'は' block'です。それがブラウザのデフォルトです。あなたはそれを 'インライン'にするべきです – pol

答えて

1

h1に表示されますが、ブロックレベルの要素であるnavの次にあるという問題があります。ブロック要素はできるだけ多くの幅を占めますが、インライン要素は必要な幅だけを占有します(w3schools参照)。多くの幅を占めないようにするには、navのディスプレイをinlineまたはinline-blockに変更する必要があります。

0

あなたulh1inlineを行うと、あなたはnavでそれをしない、それはまだdisplay: block CSSプロパティを持っており、全幅をとります。

0

もう1つ言われたように、要素はスタイルとしてブロックとして表示されます。ところで

、あなたはそれによって「影響を受けるように、ヘッダーの下に任意のH1年代を」したくない場合は:

header h1{ 
    some styling here; 
} 

あなたはそれをこのように書くことができます。

header + h1 { 
some styling here; 

を}

「ヘッダー」要素の直後に配置されるすべての「h1」要素を選択します。

ソース:http://www.w3schools.com/cssref/css_selectors.asp

関連する問題