내 탐색 모음을 수정하는 방법

-1

내 소셜 미디어 아이콘이 탐색 모음에 올바르게 표시되지 않는 것 같습니다. 나는 무엇이든 안에 무엇이 있는지보기가 쉽도록 모든 것을 둘러싼 경계를 설정했습니다. 소셜 미디어 아이콘이 탐색 바 아래에있는 이유를 이해할 수 없습니다. 아이콘이 탐색 모음에 나타나고 모든 아이콘이 < div id = "nav-left"> 안에 왼쪽으로 이동하고 싶습니다. 어떤 도움이라도 대단히 감사합니다. 문제의내 탐색 모음을 수정하는 방법

Imgur : http://imgur.com/UKojBYx

내 HTML 코드 :

<!DOCTYPE html> 
<html> 
    <head> 
     <link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'> 
     <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet"> 
     <link rel="stylesheet" href="Website(CSS).css" type="text/css" media="screen" title="no title" charset="utf-8"> 
     <title>Website</title> 
    </head> 
    <body> 
     <div class="nav"> 
      <div class="container" id="nav-left"> 
       <ul class="nav-left"> 
        <li id="twitter"><a href="http://twitter.com/#"><img src="Twitter.png" width="40" height="40" alt="Twitter" /></a></li> 
        <li id="instagram"><a href="http://instagram.com/#"><img src="Instagram.png" width="40" height="40" alt="Instagram"/></a></li> 
        <li id="quora"><a href="http://quora.com/#"><img src="Quora.jpg" width="80" height="35" alt="Quora" /></a></li> 
       </ul> 
      </div> 
      <div class="container" id="nav-right"> 
       <ul class="nav-right"> 
        <li id="future-plans"><a href="insert link">Future Plans</a></li> 
        <li id="contact"><a href="inset link">Contact</a></li> 
       </ul> 
      </div> 
     </div>

내 CSS 코드 :

/* Get the whole box of social image links to be closer to the left border. 
Get the .nav-right to have better font, bigger font, and to pushed a little more to the left of the nav box. */ 

body { 
    border: 2px solid green; 
} 

/* Navigation Bar */ 
.nav { 
    height: 7%; 
    width: 98%; 
    top: 0; 
    z-index: 10; 
    position: fixed; 
    background-color: white; 
    border: 2px solid blue; 
} 

.nav ul { 
    display: inline-block; 
} 



/* Left Side Navigation Container */ 
#nav-left { 
    height: 100%; 
    top: 0; 
    left: 0; 
    float: left; 
    border: 2px solid red; 
} 

.nav-left li { 
    display: inline-block; 
    border: 2px solid black; 
    padding: 5px; 
} 



/* Right Side Navigation Container */ 
#nav-right { 
    height: 100%; 
    top: 0; 
    right: 0; 
    float: right; 
    border: 2px solid red; 
} 

.nav-right li { 
    display: inline-block; 
    border: 2px solid black; 
    margin: auto; 
    padding: 6px; 
}

출처

2014-09-01 Hunter

탐색 링크에 사용되는 ul (기본적으로)에 약간의 패딩이 추가 된 것으로 보입니다. 네비게이터의 모든 패딩/마진을 완전히 제거해야합니다 (소셜 미디어 아이콘 가득) 다른 상자 안에 잘 앉을 수 있습니다.

다른 항목에 영향을주지 않고 특별히 할 수 있습니다.

.nav ul { 
    display: inline-block; 
    padding: 0px; // make sure there's no padding 
    margin: 0px; // and no margin 
}

출처

2014-09-01 05:47:46

사용

,482,

모든 블록 요소의 여백과 여백을 모두 제거합니다.

호프로 문제를 해결할 수 있습니다.

출처

2014-09-01 05:44:54

변경 디스플레이 속성 아래 두 줄은 .nav UL 클래스와 설정 플로트에 인라인 : .nav 왼쪽에 리 클래스를 떠났다.

http://jsfiddle.net/3zc9mtnx/

body { 
border: 2px solid green; 
} 

/* Navigation Bar */ 
.nav { 
height: 7%; 
width: 98%; 
top: 0; 
z-index: 10; 
position: fixed; 
background-color: white; 
border: 2px solid blue; 
} 

.nav ul { 
display: inline; 
} 



/* Left Side Navigation Container */ 
#nav-left { 
    height: 100%; 
    top: 0; 
    left: 0; 
    float: left; 
    border: 2px solid red; 
} 

.nav-left li { 
    display: inline-block; 
    border: 2px solid black; 
    padding: 5px; 
    float:left; 
} 



/* Right Side Navigation Container */ 
#nav-right { 
    height: 100%; 
    top: 0; 
    right: 0; 
    float: right; 
    border: 2px solid red; 
} 

.nav-right li { 
    display: inline-block; 
    border: 2px solid black; 
    margin: auto; 
    padding: 6px; 
}

출처

2014-09-01 05:55:57

그냥 항법 왼쪽 탐색 오른쪽

height:auto;display:block

의 스타일을 제공

출처

2014-09-01 06:11:13

내 탐색 모음을 수정하는 방법

답변

관련 문제