右側和左側菜單CSS？

-2

body{ 
    background-color:white; 
    color:black; 
    font-size:100%; 
    font-family: Arial; 
    line-height: 1.5%; 
    text-align: left; 
} 

.body{ 
    margin: 0 0; 
    width: 100%; 
    clear:both; 
} 

.social-media{ 
    position:fixed; 
    width:100%; 
    height: 40px; 

    background: -webkit-linear-gradient(top, #FF9C00, #FFB540); 
    background: -o-linear-gradient(top, #FF9C00, #FFB540); 
    background: -moz-linear-gradient(top, #FF9C00, #FFB540); 
    background: linear-gradient(top, #FF9C00, #FFB540); 
} 
.social-media nav ul{ 
    list-style: none; 
    margin: 0 auto; 
    float: left; 
} 

.social-media nav ul li{ 
    display: inline; 
} 
.social-media left{ 
    float:left; 
} 
.social-media right{ 
    float:right 
}

HTML

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <title>Project</title> 
     <link rel="stylesheet" href="style.css" type="text/css"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    </head> 
    <body class="body"> 
     <header class="social-media"> 
      <nav> 
       <div class="left"> 
        <ul> 
         <li><input type="button" value="Login"></li> 
         <li><input type="button" value="Register"></li> 
        </ul> 
       </div> 
       <div class="right"> 
        <ul> 
         <li><img class="social-image" src="img/facebook.png"></li> 
         <li><img class="social-image" src="img/twitter.png"></li> 
         <li><img class="social-image" src="img/youtube.png"></li> 
        </ul> 
       </div> 
      </nav> 
     </header> 
    </body> 
</html>

它這樣表示http://i.gyazo.com/b4355b1e3b84209023f594fa71fb83be.png

但是我想在右邊的Facebook，Twitter和YouTube的圖像。然而，我似乎無法得到它的工作。只是想知道有人能給我一些建議。

來源

2014-05-15 user3642449

左邊是什麼？ – radubogdan

那些圖像在屏幕截圖的左側...是不是你的意思是「左」？ – TylerH

對不起，我應該把權利。沒有離開。抱歉。 – user3642449

您在css類名中缺少句點（left和right）。

.social-media .left{ 
    float:left; 
} 
.social-media .right{ 
    float:right 
}

來源

2014-05-15 20:24:24

謝謝！這工作。 – user3642449

右側和左側菜單CSS？

回答

相關問題