다른 탐색 요소를 설명하는 반응 형 100 % 너비 검색 막대

youtube와 비슷한 네비게이션을 만들려고합니다. 각 네비게이션은 화면의 반대쪽으로 떠 있습니다. 중간에 나는 남은 공간을 채우기 위해 펼쳐지는 검색 바를 만들기 위해 노력하고 있습니다. 사용자가 브라우저의 크기를 조정하면 검색 창 너비가 줄어들어 응답 성있는 레이아웃이 가능해집니다. 나는이 일을하는 방법을 알아낼 수 없다. 검색 창을 반응 적으로 만들 수있을 때마다 오른쪽에 떠있는 div가 그 아래에 푸시되고 화면의 가장 자리에 도달 할 때까지 자체적으로 접히기 시작하지 않습니다. 오른쪽 부유 식 div에 도달하자마자 무너지기를 원합니다.다른 탐색 요소를 설명하는 반응 형 100 % 너비 검색 막대

<header> 

    <nav id="page-nav-left" role="navigation"> </nav> 

    <form id="searchBar-form"> 
     <input type="text" id="searchBar" placeholder="Search..."> 
    </form> 

    <nav id="page-nav-right" role="navigation"> </nav> 

</header>

CSS는이 모든 바이올린에 있습니다 : http://jsfiddle.net/L9qvpL32/

출처

2015-01-29 Celestriel

아마도 이와 유사할까요? http://jsfiddle.net/L9qvpL32/2/

난 그냥 당신이 위치를 변경할 수있는 검색 창을 원하지 않는 경우

그냥

#searchBar-form { 
    position: relative; 
    overflow: hidden; 
    min-width: 200px; 
}

로 변경하여 요소의 순서를 변경하고 일부 폭 : 변경

출처

2015-01-29 08:47:03 Mackelito

이 당신을 위해 무엇을 찾고있어 여기

는 HTML입니까? (당신은 작은 화면에 완전히 숨겨되는 검색을 중지 할을 약간 수정해야합니다)

<header> 
    <div class="left"></div> 
    <form id="searchBar-form" class="centre"> 
     <input type="text" id="searchBar" placeholder="Search..."> 
    </form> 
    <div class="right"></div> 
</header> 

header { 
    position: fixed; 
    top: 0px; 
    z-index: 300; 
    width: 100%; 
    height: 48px; 
    background-color: blue; 
    display: inline; 
} 

.left{ 
    top: 0; 
    background-color: red; 
    width: 100px; 
    height:100%; 
    position: absolute; 
} 

.centre{ 
    top: 0; 
    background-color: blue; 
    width: auto; 
    left: 100px; 
    right: 100px; 
    height:100%; 
    position: absolute; 
    padding: 0; 
} 

.centre input{ 
    width: 100%; 
}

출처

2015-01-29 08:39:43 Dhunt

header { 
    position: fixed; 
     top: 0px; 
    z-index: 300; 
    width: 100%; 
    height: 48px; 
    background-color: blue; 
    float:left; 
} 
form{ 
    width:80%; 
    float:left; 
} 

#page-nav-left { 
    display: inline-block; 
    height: 100%; 
    width: 20%; 
    margin: 0 auto; 
    padding: 0px;  
    float: left; 
    background-color: red; 
} 

#page-nav-right { 
    display: inline-block; 
    height: 100%; 
    width: 20%; 
    margin: 0 auto; 
    padding: 0px;  
    float: left; 
    background-color: red; 
} 

#searchBar-form { 
    position: relative; 
    overflow: hidden; 
    width:60%; 
} 

#searchBar { 
    padding: 4px 15px; 
    background-color: white; 
    width: 100%; 
} 

#searchBar-button { 
    float: right; 
    padding: 4px 15px; 
    border: 0px solid #207cca; 
    color: black; 
}

나는 이것이 당신이 원하는 가정입니다 http://jsfiddle.net/zxctbynn/. 탐색의 픽셀 수를 설정합니다. 반응성을 위해 항상 너비를 %로 설정하십시오. http://jsfiddle.net/L9qvpL32/1/

출처

2015-01-29 08:39:46 Jason

flexbox을 사용해보십시오. flexbox를 사용하면 같은 행에 밴만큼 많은 div를 배치 할 수 있으며, 부모와 서로에게 반응 할 것입니다.

나머지 요소를 채우는 요소와 너비가 절대 값으로 고정 된 요소를 설정할 수도 있습니다.

display : flex; ==> 그것에게 인 flexbox 모델을 전환
플렉스 성장 : 0/1 (또는 다른) == 공간을 남아있는 경우> 현재 상자가 성장할 수

플렉스 수축 : 0/1 http://css-tricks.com/snippets/css/a-guide-to-flexbox/

header { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
\t position: fixed; 
 
\t top: 0px; 
 
\t z-index: 300; 
 
\t width: 100%; 
 
\t height: 48px; 
 
    
 
    background-color: blue; 
 
} 
 

 
#page-nav-left { 
 
    -webkit-flex-grow: 0; 
 
    flex-grow: 0; 
 
    -webkit-flex-shrink: 0; 
 
    flex-shrink: 0; 
 
    
 
    width: 100px; 
 
    
 
    background-color: red; 
 
} \t 
 

 
#page-nav-right { 
 
    -webkit-flex-grow: 0; 
 
    flex-grow: 0; 
 
    -webkit-flex-shrink: 0; 
 
    flex-shrink: 0; 
 
    
 
    width: 100px; 
 
    background-color: red; 
 
} 
 

 
#searchBar-form { 
 
    -webkit-flex-grow: 1; 
 
    flex-grow: 1; 
 
    -webkit-flex-shrink: 1; 
 
    flex-shrink: 1; 
 
} 
 
#searchBar { 
 
    width: 100%; 
 
    max-width: 400px; 
 
} 
 
    
 

 
#searchBar-button { 
 
\t padding: 4px 15px; 
 
\t border: 0px solid #207cca; 
 
\t color: black; 
 
}

<header> 
 
     
 
\t \t <nav id="page-nav-left" role="navigation"> </nav> 
 

 
\t \t <form id="searchBar-form"> 
 
      
 
\t   <input type="text" id="searchBar" placeholder="Search..."> 
 
\t  </form> 
 
       
 
\t \t <nav id="page-nav-right" role="navigation"> </nav> 
 

 
</header>

: 적은 공간이있는 경우 (또는 다른) ==> 현재 상자가 여기에 인 flexbox하는 놀라운 자습서를 찾을 수 있습니다 다음 요소는

폭 축소 할 수 있습니다

출처

2015-01-29 08:40:32

다른 탐색 요소를 설명하는 반응 형 100 % 너비 검색 막대

답변

관련 문제