【问题标题】:Align search form button对齐搜索表单按钮
【发布时间】:2013-12-05 23:36:27
【问题描述】:

我知道很多其他人都遇到过这个问题,我已经梳理了这个网站和其他网站,并尝试了很多对其他人有所帮助的修复程序,但我就是无法为我工作。这是我的问题:

我需要将搜索按钮向下移动大约 2px,使其与输入框居中。但是,每次我尝试调整填充或添加边距或任何东西时,输入框和按钮都会受到影响。

我也尝试在表单的按钮部分添加一个类,但即使这样也会影响输入框。

HTML:

<div id="searchCon">    
<form role="search" method="get" id="searchform" class="searchform" action="http://somesite.com/">
<div>
    <label class="screen-reader-text" for="s">Search Our Site:</label>
    <input type="text" value="" name="s" id="s">
    <input type="image" value="Search" src="button.png" id="searchsubmit" style="opacity: 1;">
</div>
</form>
</div>

CSS:

 #searchCon{
    float: right;
    display: inline-block;
    height:37px;
    padding: 0px 10px 10px 280px;
    color:#2a2a2a;
}

任何帮助将不胜感激!!!

【问题讨论】:

  • 您能否发布一张图片来展示您希望实现的目标,因为您的问题并不能立即明确。
  • BenM,很遗憾我不能发布图片,因为我在这个网站上还没有足够好的声誉。

标签: html css forms button alignment


【解决方案1】:

您也可以在按钮样式中执行此操作:

<input type="image" value="Search" src="button.png" id="searchsubmit" style="opacity: 1; float: right; margin-top: 1px;">

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-12-09
    • 1970-01-01
    • 2018-08-17
    • 2014-06-14
    • 2019-02-04
    • 2020-05-08
    相关资源
    最近更新 更多