简体   繁体   中英

Getting custom submit button (image button) to line up with text input?

查看按钮如何不对齐 I am attempting to implement a custom search button by using an image button. In the image above, you can see the problem I am running into. I have searched many threads about this topic but cannot get mine fixed. Below is the css code contain both the text input (search input) and the image button (green image button). Any and all help is appreciated.

CSS:

#search{
    position: absolute;
    right: 350px;
    top: 10px;
    vertical-align: middle;
}

Html:

<div id='search'>
    <form action='searchquestions.php' method='post' >
    <input type='text' name='searchValue' placeholder='search'>
    <input type='image' src='searchbtn.png' alt='Submit' name='searchSubmit' height='20' width='20'>
    </form>
</div>

check this fiddle and see is this what you need

http://jsfiddle.net/94X8S/1/

#search input[type="image"]{
    position:relative;
    top:5px;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM