2016-03-23 14 views
-1

pictureの要素を垂直に配置するにはどうすればよいですか?垂直整列

<html lang="en-us"> 
    <head> 
    <meta charset="utf-8"> 
    </head> 
    <style type="text/css"> 
    * { 
    text-decoration: none; 
    padding: 0px; margin: 0px; 
    list-style: none; 
    } 
    #headercontainer { 
    background-color:gray; 
    } 
    #headercontainer ul li { 
     display: inline-block; 
    } 
    nav { 
    margin: 0px 10%; 
    padding: 10px 0px; 
    } 
    #floatedright { 
    float: right; 
    } 
    #floatedright a { 
    color: darkgreen; 
    font-size: 20px; 
    margin: 10px; 
    } 
    #floatedright > li { 
    float: left; 
    } 
    #piercarla { 
    font-size: 48px; 
    color: white; 
    font-family: cursive; 
    } 
    </style> 
    <body> 
    <section id="headercontainer"> 
     <nav> 
     <ul> 
      <li><a href="#" id="Piercarla">Piercarla</a></li> 
      <section id="floatedright"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Events</a></li> 
       <li><a href="#">Contact</a></li> 
      </section> 
     </ul> 
     </nav> 
    </section> 
+0

あなたのメニューにいくつかのmagin-topを追加することができます。例えば、nav {margin:15px 10%0; } – AlejandroVega

答えて

0

ホーム、イベント、お問い合わせclass="m"の3つのリストアイテムにいくつかのクラスを与えてから、margin-leftmargin-rightに合わせて垂直に並べるようにスタイルを設定します。

+0

これらのどれもうまくいきませんでした。 –