신비한 div 경계 추가

화면 너비를 100 % 채우는 녹색 배경의 탐색 모음을 원하며 텍스트와 로고가 탐색 모음의 가운데에 있습니다.신비한 div 경계 추가

이것은

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html { 
 
    width: 100%; 
 
} 
 

 
body { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    background-color: #e9eaed;  
 
    margin: 0; 
 
    padding: 0; 
 
    
 
} 
 

 
nav { 
 
    width: 100%; 
 
    background-color: #93bf2e; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    color: white; 
 
    margin: 0; 
 
    padding: 0; 
 
    
 
    
 
} 
 

 
#navMain { 
 
    width: 1096px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    padding: 0; 
 
    
 
} 
 

 
#navLeft { 
 
    width: 431px; 
 
    margin: 0; 
 
    padding: 15px 0 15px 40px;  
 
    display:inline-block; 
 
    
 
} 
 

 
#navRight { 
 
    width: 431px; 
 
    margin: 0; 
 
    padding: 15px 40px 15px 0; 
 
    text-align: right; 
 
    display:inline-block;  
 
} 
 

 

 

 
#navCenter { 
 
    width:146px; 
 
    margin: 0; 
 
    padding: 0;  
 
    display:inline-block; 
 
    vertical-align:middle;  
 
}

<!doctype html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <link rel="stylesheet" type="text/css" href="../CSS/Homepage.css"> 
 
     <title>Home</title>  
 
    </head> 
 
    <body> 
 
     <nav>    
 
      <div id="navMain"> 
 
       <div id="navLeft">Home&nbsp;&nbsp;&nbsp;&nbsp;My Page</div> 
 
       <div id="navCenter"><img src="../GeneralImages/logo.png"></div> 
 
       <div id="navRight">Create Story&nbsp;&nbsp;&nbsp;&nbsp;Log Out</div>     
 
      </div> 
 
     </nav>    
 
    </body> 
 
</html>

내가 같은 줄에 세 된 div 유지 Display:inline-block를 사용하여 내 HTML과 CSS입니다. 가운데 div 너비는 146입니다. 가운데 div는 146 픽셀 너비의 이미지를 포함합니다. 하지만 문제는 1096에 3 개의 다른 DIV가 포함 된 주 DIV의 너비를 설정하는 것입니다. 왼쪽 div (왼쪽 패딩 40px)과 오른쪽 (오른쪽 패딩 40px) DIVs 너비를 435로 설정하면 오른쪽 div가 두 번째 줄. 이것은 수학이 옳기 때문에 이상합니다 (435 + 40 + 435 + 40 + 146). 그러나 왼쪽과 오른쪽 DIV의 너비를 431로 설정하면 두 줄은 같은 줄에 있습니다. 이것은 어떤면에서는 8 픽셀이 불가사의하게 경계를 잃어 버리는 것을 의미합니다. 그 경계선을 제거하는 데 도움을 주시겠습니까?

출처

2014-11-28 user3029081

div 사이에 공백이 오는 이유는 코드 요소 (예 : 줄 바꿈, 탭 또는 공백)에 공백이 있기 때문입니다. 마크 업에서 그들을 제거하고 div들 제대로 줄 지어됩니다

<div id="navMain"> 
    <div id="navLeft">Home    My Page</div><div id="navCenter"><img src="../GeneralImages/logo.png"></div><div id="navRight">Create Story    Log Out</div> 
</div>

을 또는 당신은 HTML 주석을 사용할 수 있습니다

<div id="navMain"> 
    <div id="navLeft">Home    My Page</div><!-- 
    --><div id="navCenter"> 
    <img src="../GeneralImages/logo.png"> 
    </div><!-- 
    --><div id="navRight">Create Story    Log Out</div> 
</div>

못생긴 보이지만 트릭을 수행합니다. 레이아웃이 예상대로 보이지 않는 이유를 알게 되었으니, 이것이 도움이되기를 바랍니다. inline-block이 여기에 적합하지 않기 때문에 전체 구조를 다시 고쳐 먹겠습니다.

자세한 내용 및 대체 솔루션은 this page을 참조하십시오.

출처

2014-11-28 09:13:16 user1438038

나는 당신의 HTML 코멘트 제안을 시도하고 완벽하게 작동합니다. 정말 고마워. – user3029081

당신은 오신 것을 환영합니다. 문제가 해결되면 대답을 수락하십시오 (옆에있는 체크 표시를 클릭하십시오). – user1438038

요소에 대해 display: inline-block을 사용하고 있기 때문에 요소를 공백/새 줄/탭으로 구분하면 각 요소 사이에 공백이 생기므로이를 극복하기 위해해야 할 일은 DEMO

: 공간/새로운 라인/탭 또는과 요소는 공간에 대한 소감을주는, 또는 음수 마진을 설정, 당신이 여기이 site

에서 그것을 할 수있는 더 많은 방법을 읽을 수 있습니다 당신의 코드 예입니다

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html { 
 
    width: 100%; 
 
} 
 

 
body { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    background-color: #e9eaed;  
 
    margin: 0; 
 
    padding: 0; 
 
    
 
} 
 

 
nav { 
 
    width: 100%; 
 
    background-color: #93bf2e; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    color: white; 
 
    margin: 0; 
 
    padding: 0; 
 
    
 
} 
 

 
#navMain { 
 
    width: 1096px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    padding: 0; 
 
    
 
} 
 

 
#navLeft { 
 
    width: 435px; 
 
    margin: 0; 
 
    padding: 15px 0 15px 40px;  
 
    display:inline-block; 
 
    
 
} 
 

 
#navRight { 
 
    width: 435px; 
 
    margin: 0; 
 
    padding: 15px 40px 15px 0; 
 
    text-align: right; 
 
    display:inline-block;  
 
} 
 

 

 

 
#navCenter { 
 
    width:146px; 
 
    margin: 0; 
 
    padding: 0;  
 
    display:inline-block; 
 
    vertical-align:middle;  
 
}

<nav> 
 
    <div id="navMain"> 
 
     <div id="navLeft">Home&nbsp;&nbsp;&nbsp;&nbsp;My Page</div> 
 
     <div id="navCenter"> 
 
      <img src="../GeneralImages/logo.png"/> 
 
     </div> 
 
     <div id="navRight">Create Story&nbsp;&nbsp;&nbsp;&nbsp;Log Out</div> 
 
    </div> 
 
</nav> 
 

 
<nav> 
 
    <div id="navMain"><div id="navLeft">Home&nbsp;&nbsp;&nbsp;&nbsp;My Page</div><div id="navCenter"><img src="../GeneralImages/logo.png"/></div><div id="navRight">Create Story&nbsp;&nbsp;&nbsp;&nbsp;Log Out</div></div> 
 
</nav> 
 

 
<nav> 
 
    <div id="navMain"> 
 
     <div id="navLeft">Home&nbsp;&nbsp;&nbsp;&nbsp;My Page</div><!-- 
 
     --><div id="navCenter"><!-- 
 
      --><img src="../GeneralImages/logo.png"/><!-- 
 
     --></div><!-- 
 
     --><div id="navRight">Create Story&nbsp;&nbsp;&nbsp;&nbsp;Log Out</div><!-- 
 
    --></div> 
 
</nav>

출처

2014-11-28 09:14:28 Kyojimaru

답변 해 주셔서 감사합니다. 그것은 내 문제를 해결했다. :) – user3029081

신비한 div 경계 추가

답변

관련 문제