오른쪽에 하나의 버튼이 있고 라인을 채우기 위해 왼쪽에 두 개의 입력이있는 방법은 무엇입니까?

몇 가지 비슷한 게시물을 발견했지만이 문제에 대한 해결책은 아닙니다. 나는이 작업을 수행하기 위해 노력하고있어 :오른쪽에 하나의 버튼이 있고 라인을 채우기 위해 왼쪽에 두 개의 입력이있는 방법은 무엇입니까?

| +---------------------+ +---------------------+ +------------------------------+ | 
| |  Input  | |  Input  | |    Button   | | 
| | 50% remaining width | | 50% remaining width | | fixed width based on content | | 
| +---------------------+ +---------------------+ +------------------------------+ |

두 개의 입력 필드와 같은 줄에 버튼 (고정되지 화면 폭을)
버튼 수레 오른쪽에 (에 따라 크기에 내용이 고정되어 있지 않음)
두 개의 입력란이 왼쪽으로 떠 있습니다 (각 줄을 나머지 50 % 채우기)
화면 너비가 정의 된 최소값보다 작 으면이 세 요소가 한 줄을 채 웁니다 각자

몇 가지 코드를 시도했지만 제대로 작동하는 솔루션을 찾을 수 없습니다. 이것은 제가 만든 더 나은 (그러나 여전히 올바르지 않은) 해결책입니다 :

<html> 
<head> 
    <style type="text/css" media="screen"> 

.container {width: 100%; display:table;} 
.left-side{display:table-cell; vertical-align:middle} 
.left-side .fields {width: 100%;} 
.form-control {width: 49%} 
.right-side {float:right} 

</style> 
</head> 
<body> 

<div class="container"> 
    <div class="left-side"> 
     <div class="fields"> 
      <input type="text" class="form-control" /> 
      <input type="text" class="form-control" /> 
     </div> 
    </div> 
     <div class="right-side"> 
      <button type="submit" class="">Search</button> 
     </div> 
</div> 

</body> 
</html>

아마도 더 좋은 방법이 있습니다. 당신이 나를 도울 수? 감사!

출처

2014-10-13 Lupo73

이이 배치뿐만 아니라 포함 (방법 BYT, 하드하지 않은)하지만, 미디어 쿼리는 ...이 반응하게 질문을 좁힐 ... 너무 광범위 당신의 노력 중 일부를 보여줌으로써 그것이 그렇듯이, 그것은 더 많은 코드와 같은 질문입니다 ... – LcSalazar

"여러 코드를 시도했습니다". 우리는 당신이 가지고있는 것과 당신이 시도한 것을 볼 수 있도록 게시하십시오. – j08691

첫 번째 게시물을 수정했습니다 (미안하지만, 저는 여기에서 새로 왔습니다). – Lupo73

이렇게 오래된 주제이기도하지만 해결책을 찾으려했습니다. 입력이있는 왼쪽면이 최대화 (너비 100 %) table-cell, 오른쪽이 정의되지 않은 길이 인 table-cell입니다. 두 테이블 셀의 내용은 nowrap입니다.

여기에 바이올린을 확인합니다 http://jsfiddle.net/jpavel76/hL5ggv4L/

출처

2015-02-25 13:50:25 John

오른쪽에 하나의 버튼이 있고 라인을 채우기 위해 왼쪽에 두 개의 입력이있는 방법은 무엇입니까?

답변

관련 문제