남은 공간을 채우는 가로 막대를 얻는 방법?

Reference

그래서 # 헤더-NAV는 수평 링크 (#의 탐색 바)가 줄과 #bar 나머지 공간을 채우고 있지만, 아무튼 그 것을 다음 행으로 넘어가거나 링크 뒤로 이동하지 마십시오. 따라서 링크 중 하나와 같지만 # header-nav가 허용하는 범위까지 확장됩니다.

html로 :

<div id="header-nav"> 
    <div id="nav-bar"> 
      <ul> 
       <li><a href="link1">Home</a></li> 
       <li><a href="link2">Page1</a></li> 
       <li><a href="link3">Page2</a></li> 
       <li><a href="link4">Page3</a></li> 
       <li><a href="link5">Page4</a></li>  
      </ul> 
    </div> 
<div id="bar"></div> 
</div>

CSS의 :

#header-nav ul 
{ 
padding-left:0px; 
margin: 0; 
padding-top:10px; 
padding-bottom:10px; 
list-style-type:none; 
text-align: left; 
float:center; 
margin-top:0px; 
} 
#header-nav ul li 
{ 
margin-left:1px; 
display: inline; 
} 

#header-nav ul li a 
{ 
text-decoration:none; 
padding: .2em .4em; 
color: black; 
border:1px solid lightgrey; 
background-color:lightgrey; 
}

출처

2014-11-17 AimqEz

는 [이 첫 번째 읽기] (http://stackoverflow.com/help/how- to-ask) – jrenk

@AimqEz 무엇을 알고 싶습니까? – cuSK

죄송합니다. 필요한 항목을 지정하지 않았습니다. 참조 이미지를 얻을 때 질문을 업데이트 할 것입니다. – AimqEz

내 동생이 해결책을 발견했다.

을 Heres jsfiddle

CSS의 링크 :

<body> 
    <div id="header-nav"> 

     <div id="cell1"> 
     <div id="buttons"> 
      <ul> 
       <li><a href="page1">Home</a></li> 
       <li><a href="page2">Page1</a></li> 
       <li><a href="page3">Page2</a></li> 
       <li><a href="page4">Page3</a></li> 
       <li><a href="page5">Page4</a></li> 
      </ul> 
     </div> 
     </div> 

     <div id="cell2"> 
      <div id="bar"> 

      </div> 
     </div> 

    </div> 
</body>

html로 :

#buttons ul li a { 
    text-decoration:none; 
    padding: 5px 10px 5px 10px; 
    color: black; 
    border:1px solid lightgrey; 
    background-color:lightgrey; 
} 

#buttons ul { 
    padding-left:0px; 
    margin: 0; 
    padding-top:10px; 
    padding-bottom:10px; 
    list-style-type:none; 
    text-align: left; 
} 

#buttons ul li { 
    margin-left:1px; 
    display: inline; 
} 


#header-nav { 
    display:table; 
    width:100%; 
} 

#cell1 { 
    display:table-cell; 
    white-space: nowrap; 
    vertical-align:top; 
} 

#buttons { 
    float:left; 
} 

#cell2 { 
    display:table-cell; 
    width:100%; 
    padding: 4px 3px 5px 4px; 
    vertical-align:top; 
} 

#bar { 
    float:left; 
    width:100%; 
    background-color:black; 
    height:29px; 
    background-color:lightgrey; 
}

출처

2014-11-18 11:23:00 AimqEz

조회 화면 : 플렉스, 플렉스 : 자동차와 플렉스 : 없음. 너비와 결합 : 컨테이너에 대해 100 %, 그것은 당신이 찾고있는 것을 제공해야합니다.

출처

2014-11-17 09:03:06 Mike

작동하지 않았습니다./ – AimqEz

# header-nav {display : flex; 너비 : 100 %} # nav-bar {flex : none} #bar {flex : auto} ? – Mike

내게 CSS를 보여줄 수 있습니까? 이 체크 아웃 :

http://jsfiddle.net/1ds7t19p/1/

#header-nav { 
    width:800px; 
    background:#ccc; 
    height:50px;  
} 

#nav-bar ul { 
    width:465px;  
    float: left; 
    padding: 0; 
} 

#nav-bar ul li{ 
    display: inline-block; 
} 
#nav-bar ul li a{ 
    padding:10px 25px; 
    background:#999; 
    height:50px;  
} 
#bar { 
    float: right; 
    height:50px;  
}

출처

2014-11-17 09:15:02 nanbatman

나는 CSS를 추가했다. 아이디어는 페이지가 확대되거나 더 많은 링크를 추가 할 때 막대 크기가 조정된다는 것입니다. – AimqEz

다음 #bar (코드 편집)에서 배경색과 너비를 피하십시오. – nanbatman

남은 공간을 채우는 가로 막대를 얻는 방법?

답변

관련 문제