백그라운드 이미지에서 엔트리 폼과 버튼의 위치를 ​​올바르게 바꿀 수 있습니까?

Question

프레임 워크 용 Twitter Bootstrap 2를 사용하는 반응 형 테마 내의 배경 이미지 상단에 항목 양식이 포함 된 텍스트 위젯을 만들려고합니다. 나는 진입 버튼과 접촉을 이미지에서 올바르게 positon하려고 노력하고있다. 지금은 중간에 있지만 왼쪽으로 이동하려고합니다. 위젯에 사용하는 코드는 다음과 같습니다. 어떤 사람이 상자와 버튼을 이동하기 위해 인라인을 추가하는 CSS를 파악하는 데 도움을 줄 수 있습니까? (그런 다음 들어가서 조정할 수 있습니다. 추가 할 내용을 파악해야합니다.) 감사합니다.

<form style="-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;padding: 3px;text-align: center;background: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg) no-repeat center; padding: 25% 0;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=noahsdad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" <input type="text" style="width:200px;height:20px;" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/> 
   </p> 
   <input type="hidden" value="noahsdad" name="uri"/><input type="hidden" name="loc" value="en_US"/> 
   <input type="submit" value="Subscribe" /> 
</form> 

나는 처음 질문을 게시 한 이래로 약간의 코드를 변경했습니다.

<form style="-webkit-background-size: cover;-moz-background-size: cover; 
-o-background-size: cover;background-size: cover;padding: 3px;text-align: center;background: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg) no-repeat center; 
padding: 30% 0;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=noahsdad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
   <p> 
       <input type="text" style="width:170px;height:18px;margin-bottom:-110px;margin-left:-125px;" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/> 
   </p> 
   <input type="hidden" value="noahsdad" name="uri"/><input type="hidden" name="loc" value="en_US"/> 
   <input type="submit" style="margin-bottom:-134px;margin-left:-220px;" value="Subscribe" /> 

Answer 1

나는 당신이 왼쪽 하단 모서리라고 가정합니다. 그렇다면 다음을 사용하십시오.

<form style="-webkit-background-size: cover;-moz-background-size: cover; 
-o-background-size: cover;background-size: cover;padding: 3px;text-align:  center;background: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg)  no-repeat center; 
padding: 30% 0;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=noahsdad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
<p> 
    <input type="text" style="width:170px;height:18px;float:left;margin-top:28%;" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/> 
</p> 
<input type="hidden" value="noahsdad" name="uri"/><input type="hidden" name="loc" value="en_US"/> 
<input type="submit" style="float:left;margin-top:28%;" value="Subscribe" />