HTML 메뉴 선택 드롭 다운 : 오른쪽에서 왼쪽

HTML 선택 메뉴의 드롭 다운을 오른쪽에서부터 시작하여 왼쪽으로 흐르려고합니다. 바로 여기에있는 것처럼 - http://www.flipkart.com/하지만 그 일은 일어나지 않습니다. 현재 왼쪽에서 시작하여 오른쪽으로 흘러갑니다. IE에서는 드롭 다운 메뉴가 숨겨지고 있습니다.HTML 메뉴 선택 드롭 다운 : 오른쪽에서 왼쪽

코드 -

<div class="search fr curves3"> 
    <input class="main_search curves3" type="text" value="" placeholder="Search for items"> 
    <span style="border-left:1px solid #999; float:left;"> 
    <select> 
     <option>All Categories</option> 
     <option>Cat</option> 
     <option>Dog</option> 
     <option>Bird Categories Categories Categories</option> 
     <option>Aquatics</option> 
    </select> 
    </span> 
    <input type="submit" value="search" name="Search"> 
</div>

CSS -

.search { 
border:1px solid #999; 
} 
.search .main_search { 
float:left; 
padding: 7px 0 7px 5px; 
border:0; 
outline:none; 
margin:0; 
} 
.search select { 
float:left; 
border:0; 
outline:none; 
padding: 7px 10px 7px 10px; 
margin:0; 
width:130px; 
}

JSfiddle -

http://jsfiddle.net/generalsagar/gQxR7/가 어떻게 드롭 다운이 오른쪽에서 시작하여 왼쪽 방향으로 흐를 수 있도록? 감사합니다

출처

2013-05-17 Anonymous

사용 absolute 위치. 검색 창에 귀하의 CSS는 IE에서이

.search { 
    border:1px solid #999; 
    position:absolute; 
    right:0; 
}

JS Fiddle Demo

출처

2013-05-17 03:42:45 Sachin

같은 것, 드롭 다운도 선택과 동일한 폭을 받고있다. 따라서 그것의 절반은 숨겨지고 있습니다. –

IE와 관련된 브라우저 호환성 문제는 @SagarRaj에서 확인할 수 있습니다. ** html5shiv.js **를 사용할 수 있으며, [here] (http://code.google.com/p/html5shiv/)에서 다운로드 할 수 있으며, [여기] (http://meyerweb.com/eric/tools/css/reset/)에 사용자 정의 CSS 파일 앞에 ** reset.css **를 추가하는 것을 잊지 마십시오. 희망이 당신을 도울 것입니다. – V15HM4Y

HTML 메뉴 선택 드롭 다운 : 오른쪽에서 왼쪽

답변

관련 문제