2016-09-13 3 views
0

Drop down select boxes정렬 상자 및 텍스트 상자 선택 상자 선택 및 텍스트 상자

이것은 현재 프런트 엔드의 모양입니다. 나는 서로 오른쪽으로 정렬 상자를 드롭 다운 얻을 방법을 알아 내려고 애 쓰고. 그래서 그들은 모두 멀리있는 것과 일치 할 것입니다.

ID 이이 요소 중 하나처럼 보이는 것입니다> "=>보다 큼 "크거나

같음을 미만 보다 작거나 같음 같음 HTML.

+0

사용 숨겨진 테이블과 당신이 지금까지이 일부 마크 업, 또는 CSS를 제공 할 수 – slayernoah

+0

의 요소를 배치? – arnolds

+0

당신의 html 코드가 필요하다. 알아 내기 힘들다. – Nimmi

답변

1

각 항목을 너비 (예 : 90 %)의 div 안에 넣은 다음 각 상자를 오른쪽으로 띄웁니다.

+0

굉장한 것은 내가 한 일이다. 그게 효과가 있었어! –

+0

@TroyReynolds 좋아요! 다행스럽게 도울 수있어! – theEpsilon

0

숨겨진 테이블을 사용하고 그 안에 요소를 넣으십시오. 필요에 따라 CSS를 추가 할 수 있습니다.

<html> 
    <head> 
    </head> 

    <body> 
     <table> 
      <tr> 
       <td>Some text</td> 
        <td> 
         <select> 
          <option value="volvo">Volvo</option> 
          <option value="saab">Saab</option> 
          <option value="mercedes">Mercedes</option> 
          <option value="audi">Audi</option> 
         </select> 
        </td> 
      </tr> 
      <tr> 
       <td>abc</td> 
       <td> 
        <select> 
         <option value="volvo">Volvo</option> 
         <option value="saab">Saab</option> 
         <option value="mercedes">Mercedes</option> 
         <option value="audi">Audi</option> 
        </select> 
       </td> 
      </tr> 
     </table> 
    </body> 

</html> 
1

너비를 설정하지 않은 동적 솔루션의 경우 2 개의 래퍼 컨테이너를 사용해야합니다.

Btw 레이아웃을 위해 테이블을 사용하도록 조언하는 다른 의견 작성자와 동의하지 않습니다. 테이블은 위치 지정이 아닌 데이터 용으로 사용해야합니다.

ul { 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
}
<ul> 
 
    <li>text</li> 
 
    <li>another example</li> 
 
</ul> 
 
<ul> 
 
    <li> 
 
    <select name="foo" id="foo"> 
 
     <option value="foo">foo</option> 
 
    </select> 
 
    </li> 
 
    <li> 
 
    <select name="bar" id="bar"> 
 
     <option value="bar">bar</option> 
 
    </select> 
 
    </li> 
 
</ul>