Question

尝试将搜索按钮（图像）显示在搜索框的旁边或内部。我尝试的一切，搜索按钮（图像）总是在搜索框下面，并且由于某种原因而居中。

<form id="navigationSearchForm" action="http://products.divalsafety.com/storefrontCommerce/search.do" method="get" name="searchForm" accept-charset="UTF-8">
        <input id="searchInputBox" type="text" name="keyword" size="25" maxlength="75" value="">
            <span id="keywordspan" style="display: none; visibility: hidden;"><label>keyword</label>
                <input id="keywordInput" type="text" name="searchType" value="keyword" size="12" maxlength="10">
            </span> 
            <span id="emailspan" style="display: none; visibility: hidden;"><label>E-mail</label>
                <input id="emailAddressInput" type="text" name="emailAddress" size="12" maxlength="20">
            </span>
        <input id="searchGoButton" style="width: 27px;" type="image" src="/images/searchbutton27px.png" alt="Search">
</form

Answer 1

尝试单独定义css，而不是HTML中的内联。尽管如此，我还是采用了您的代码并为搜索图像添加了一种位置样式。这应该工作。

试试这个：

    <form id="navigationSearchForm" action="http://products.divalsafety.com/storefrontCommerce/search.do" method="get" name="searchForm" accept-charset="UTF-8">

        <input id="searchInputBox" type="text" name="keyword" size="25" maxlength="75" value=""></input>

         <span id="keywordspan" style="display: none; visibility: hidden;"><label>keyword</label>

         <input id="keywordInput" type="text" name="searchType" value="keyword" size="12" maxlength="10"></input>
         </span> 

        <span id="emailspan" style="display: none; visibility: hidden;"><label>E-mail</label>
        <input id="emailAddressInput" type="text" name="emailAddress" size="12" maxlength="20"></input>
        </span>

        <input id="searchGoButton" style="width: 27px; position:relative; left:-40px; top:10px;" type="image" src="/images/searchbutton27px.png" alt="Search"></input>
    </form>

在搜索框旁边显示搜索按钮（图像）

1 个答案: