로고 옆에있는 메뉴 항목 맞추기가 힘들어졌습니다

내 메뉴 항목이 내 탐색 표시 줄 내에서 내 로고 옆에 정렬되도록하는 데 문제가 있습니다. 내 메뉴 항목이 내 로고 바로 아래에 나타나고 오른쪽, 가로 위치가 정확합니다. 항목이 줄에 있고 탐색 표시 줄에 있도록 세로 위치를 조정해야합니다.로고 옆에있는 메뉴 항목 맞추기가 힘들어졌습니다

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Serving Grace - Home</title> 
    <!-- Stylesheet --> 
    <link href="Private/stylesheet.css" rel="stylesheet" type="text/css"/> 
</head> 

<body> 
<div id="content"> 
    <nav id="nav"> 
    <ul> 
     <li><a href="index.html" id="logo"><img src="Logo/logo.png"/></a></li> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Volunteer</a></li> 
     <li><a href="#">Donate</a></li> 
     <ul> 
    </nav> 

    <div id="image"> 
    <img src="Images/Content.png"/> 
    </div> 

    <div id="info"> 
    <img src="Images/info.png"/> 
    </div> 

    <div id="footer"> 
    <a href="www.facebook.com"><img src="Images/Facebook.fw.png"></a> 
    <a href="www.twitter.com"><img src="Images/Twitter.fw.png"></a> 
    <a href="www.google.com"><img src="Images/Google.fw.png"></a> 

    <p id="copyright">&#169; 2013 Jeffery Evans</p> 
    </div> 

</div> 
</body> 

</html>

CSS

body { 
    background-color: #C8C8C8; 
} 

#content { 
    width: 1090px; 
    height: 900px; 
    background-color: white; 
    margin-left: auto; 
    margin-right: auto; 
    box-shadow: 5px 3px 5px #888; 
    min-height: 100%; 
    position: relative; 
} 

#nav { 
    background-color: #222222; 
    height: 100px; 
    border: 1px solid black; 
} 

#nav li { 
    text-decoration: none; 
    display: inline; 
    margin: 25px 20px 10px 10px; 
    font-family: Arial; 
    color: #F59239; 
    position: relative; 
} 

#nav li a { 
    text-decoration: none; 
    color: #F59239; 
    font-family: Arial; 
    font-size: 18px; 
} 

#logo { 
    padding-right: 300px; 
    position: inline-block; 
} 

#nav li a:hover { 
    color: #222222; 
} 

#image { 
    top: 100px; 
    position: relative; 
    float: left; 
    left: 15px; 
} 

#info { 
    top: 100px; 
    position: relative; 
    float: left; 
    left: 30px; 
} 

#footer { 
    display: table-cell; 
    width: 1090px; 
    height: 70px; 
    background-color: #222222; 
    bottom: 0; 
    position: absolute; 
} 

#footer a { 
    margin-left: 15px; 
} 

#copyright { 
    color: white; 
    text-align: center; 
    vertical-align: middle; 
}

출처

2013-12-15 Th3Pr1de

대신

는

#nav { 
    height: 100px; 
}

시도

같은 문제가 해결되지 않을 경우

#nav { 
    line-height: 100px; 
}

, 다음도 그냥이

#logo { 
    padding-top: 10px; 
}

처럼 뭔가를 할 것

가장 쉬운 방법은 당신의 탐색 리를위한 라인 높이를 사용하여 시도 및/또는 NAV 그러면 로고가 10 픽셀 씩 내려 가고 그에 맞게 조정됩니다.

출처

2013-12-15 01:10:28 CRABOLO

도움 주셔서 감사합니다. 나는 "선 높이"로 바꾸고 그것을 조정하려고 노력했지만, 내 탐색 바를 넓게 만들었다. 또한 패딩 조절에 대해서도 똑같은 아이디어가 있었지만, 그렇게 할 때 아무 것도 바뀌지 않았습니다. 나는 어떤 생각을 가지고 있나? – Th3Pr1de

logo.png가 매우 넓으면 메뉴 항목을 다음 줄로 밀고있을 수 있습니다. Firefox 용 로고와 작은 gif로 코드를 시도했는데 Firefox와 Chrome에서 이미지와 메뉴 텍스트가 잘 맞았습니다.

출처

2013-12-15 02:05:13 user3103346

나는 그것에 대해 정말로 생각해 보지 못했다. 나는 로고의 크기를 조정하려고 시도했지만 운이 없었다. 메뉴 항목은 여전히 색상이 지정된 navbar 아래에 떨어졌습니다. 로고는 280px x 110px입니다. – Th3Pr1de

로고 옆에있는 메뉴 항목 맞추기가 힘들어졌습니다

답변

관련 문제