인라인 반응 형 폼 요소

필자는 인라인 및 반응 형이어야하는 텍스트 입력 요소와 제출 입력 요소를 가지고 있습니다. 문제는 버튼의 위치를 엉망으로 만들지 않고 텍스트 입력 요소를 유동적으로 만들 수있는 방법을 찾을 수 없다는 것입니다. 어떤 도움을 주시면 감사하겠습니다.인라인 반응 형 폼 요소

다음은 내가 사용중인 HTML 구조입니다.

<div class="search-call-to-action"> 
    <form action="#"> 
     <input type="text" name="search" placeholder="Search charities by keyword or name..."> 
     <input class="btn btn-primary btn-large" type="submit" name="submit" value="Search"> 
    </form> 
</div>

다음은 내가 달성하려는 것의 스크린 샷입니다. 텍스트 입력은 유동적이어야합니다. http://i.imgur.com/Ivty5Qq.png

출처

2013-04-01 Mike

"반응 형"이란 무엇을 의미합니까? –

CSS를 어디에 배치 했습니까? – Adrian

@ExplosionPills 텍스트 입력은 유동적이어야하므로 뷰포트 크기가 변경 될 때 축소됩니다. 이 작은 폼을 둘러싼 div는 부트 스트랩 .container 내부에 있으므로 부모 div가 작아집니다. 너비를 백분율로 설정하면 유체가 될 수없는 단추의 위치가 변경되기 때문에 작동하지 않는 것처럼 보입니다. – Mike

나는 이것을 달성하는 방법에 대한 실습 데모를 제공했다. 오버 플로우 속성을 사용합니다. 데모 http://jsfiddle.net/kevinPHPkevin/vbdy9/

<form action="search.php" method="get"> 
    <input type="submit" name="search" value="Go" style="float: right" /> 
    <div style="overflow: hidden; padding-right: .5em;"> 
     <input type="text" name="term" style="width: 100%;" /> 
    </div> 
</form>

출처

2013-04-01 20:02:09 Vector

완벽하게 작동합니다. 감사! – Mike

이렇게하려면 미디어 쿼리를 사용할 수 있습니다. 그런 다음 각 해상도에 대한 쿼리를 만들어야합니다. 예 :

@media (min-width: 320px){ 

div 
{ 
    //some propererties in ems 
}

출처

2013-04-01 19:53:41 marciano

인라인 반응 형 폼 요소

답변

관련 문제