2014-05-15 4 views
-2

CSS오른쪽 및 왼쪽 메뉴 CSS?

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

처럼 보여줍니다. 그러나 나는 그것을 작동시키는 것처럼 보일 수 없다. 누군가가 나에게 조언을 해 줄 수 있는지 궁금해.

+0

왼쪽에? – radubogdan

+2

그 이미지가 그 스크린 샷의 왼쪽에 있습니다 ... 당신이 "왼쪽"이라는 뜻이 아닌가요? – TylerH

+0

죄송합니다. 나는 옳게 생각했습니다. 왼쪽이 아닙니다. 죄송합니다. – user3642449

답변

0

CSS 클래스 이름에 마침표가 누락되었습니다 (leftright).

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

고마워요! 그게 효과가 있었어. – user3642449

관련 문제