텍스트 상자가 버튼으로 플러시됩니다.

Question

왼쪽과 오른쪽에 두 개의 버튼이있는 입력 상자를 만들려고합니다. http://vegan.fm/clone/?p=8679이

그것은 텍스트 상자 + 여기에 버튼과 같아야합니다 : 나는 종류의 잘 정렬 얻을 수있었습니다 http://appsumo.com/welcome/?next=/

,하지만 그냥 얻을 것으로 보인다 여기 프랑켄슈타인의 괴물은 내가 지금까지 가지고있어 다른 OS 또는 컴퓨터에서 뒤죽박죽.

나는 패딩과 여백 값을 강박적으로 조정하여이 작업을 수행했지만 더 나은 방법이 있음을 알았습니다. 지금까지 구글/stackoverflow 검색 아무것도 찾지 못했습니다. 어떤 도움을 주셔서 감사합니다. 고맙습니다.

업데이트 : 문제는 버튼의 높이 값과 입력 상자가 완전히 동일하지만 버튼이 항상 입력 상자보다 높다는 것입니다. 여기

는 일부 코드입니다 :

.halfbutton { 
    border-top: 1px solid #f0d995; 
    background: #806a43; 
    padding: 0px 3px 0px 3px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#d1ad51), to(#806a43)); 
    background: -moz-linear-gradient(top, #d1ad51, #806a43); 
    height: 30px; 
    width:25px; 
    -webkit-border-radius: 8px 0 0 8px; 
    -moz-border-radius: 8px 0 0 8px; 
    border-radius: 8px 0 0 8px; 

    text-shadow: rgba(0,0,0,.4) 0 1px 0; 
    color: white; 
    font-size: 14px; 
    font-family: Helvetica, Arial, Sans-Serif; 
    text-decoration: none; 
    vertical-align: middle; 
    } 

그리고 입력 상자 : 순간

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/"> 

    <input style="z-index:1999;height:30px;margin:0 -.1em 0 -.1em;border:1px solid;border-color:#a1a1a1;" size="20" type="text" name="s" id="s" value="<?php ... /> 
</form> 

Answer 1

나는 당연한 질문을 이해하고있다.
링크에서와 같이 보이게하려면 입력 양식에 배경 그림을 사용해야합니다.
당신이 CSS에서 CSS3
에 삽입 된 입력 양식처럼 보이게 할 수
웹 사이트에서 코드 코멘트에 링크가있다

#inputform{ 
    background-color: #f7f7f7; 
    -moz-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1); 
    -webkit-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1); 
    box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1); 
    ... 
} 

;

Answer 2

, 정렬은 (크롬) 나에게 좋아 보이지만 테두리 입력에 없다 그래서 무슨 일이 일어 났는지 말하기는 어렵습니다.

내 의견은 - 지금 당신은 입력 필드의 왼쪽에 드롭 다운으로 add'l 검색 옵션이 있고, 입력의 오른쪽에 add'l 선택 항목이있는 "more"드롭 다운이 있습니다. 나는 이것이 입력의 바로 오른쪽에 submit/options 버튼 인 검색 상자의 전형적인 사용자 모델을 따르지 않는다고 주장 할 것이다. 어쩌면 옵션 버튼을 오른쪽으로 옮긴 다음 "더"를 그 오른쪽 (또는 아래)의 별도 버튼으로 띄우십시오.

그냥 생각해보십시오.