HTML 요소를 배치하는 CSS

Question

HTML 요소를 정렬하려고합니다. 기본적으로, 나는 오른쪽에 UL LI 메뉴 (인라인)를 설정하고 왼쪽에있는 입력은 고정되지 않는 나머지 모든 공간을 차지하고 모든 것을 1 줄로 설정하려고합니다. 3 LI 요소, 필요한만큼의 공간 (최소, 고정 요소가 아닌 일부 요소를 추가 할 수 있음)을 취하고 입력은 가능한 한 모든 것을 취합니다 (왼쪽에있는 것의 100 %).

블라인드, 인라인, 인라인 블록, 테이블, 테이블 셀 (이것으로 거의 성공했다), 왼쪽, 오른쪽으로 떠올랐다. 고정 된 너비를 놓지 않고 설정할 수 없다. ..

<main> 
     <div id="searchBar"> 

    <form> 
     <input id="searchInput"/> 
    </form> 

     <ul id="searchOptions"> 
      <li><a href="#"></a></li> 
      <li><a href="#"></a></li> 
      <li><a href="#"></a></li> 
     </ul> 

     </div> 
    </main> 

어쩌면 약간의 여백, 오버 플로우, 해킹을 넣을 수 있습니까?

도와주세요!

Answer 1

Like this, maybe?

ul { 
    list-style-type: none; 
    display: table-cell; 
    width: 1px; 
    padding:0 0 0 5px; 
} 
form { 
    display:table-cell; 
    width:100%; 
} 
li { 
    display:table-cell; 
    white-space: nowrap; 
    padding:0 5px 
} 
input { 
    width:100%; 
} 

Answer 2

대답 에서 Alohci 내가 무엇을 찾고 있었다입니다! 나는 이런 식으로 해결 : 나는 요소 주위에 더 된 div를 생성하고, 기본 테이블 등의 사업부 및 세포와 같은 그 div의을 한

<main> 
     <div id="searchBar"> 
      <div id="searchText"> 
       <form> 
       <input id="searchQuery" /> 
       </form> 
      </div> 
      <div id="searchOptions"> 
       <ul> 
       <li><a href="#">Cla</a></li> 
       <li><a href="#">Res</a></li> 
       <li><a href="#">Pro</a></li> 
       </ul> 
      </div> 
     </div> 
    </main> 

main div#searchBar { 
    display:table; 
    width:100%; 
} 

main div#searchText { 
    display:table-cell; 
    width:100%; 
} 

main div#searchOptions { 
    display:table-cell; 
    width:100%; 
} 

main input#searchQuery { width:100%; } 

main ul { display:table; } 

main ul li { display:table-cell; } 

main ul li a { display:table-cell; } 

, 그리고 세포와 같은 그 테이블로 UL과 LI의 후 ... 그런 것 같아요 FORM으로 작동하지 않았고 INPUT이 div에 없었기 때문에 UL에 100 %를 채울 수 없었습니다 ...

하지만 Alochi는 나에게 더 컴팩트 한 버전 THNX를주었습니다!