Question

这是我的link，如果你看一下我的搜索框，你会看到设计有点偏。

这是我的HTML

<form action="/contacts" class="myform" method="get">
    <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="&#x2713;" /></div>
    <fieldset style="border:none; padding-top:12px;">
    <ul><li>
    <input id="search_area" name="search" type="text" value="matt" />
    <span class="submit_form"></span>
    </li>
    </ul>
    </fieldset>      
</form>

这是我的一些CSS

#search_bar {
    width: 265px;
}
#search_area {
    background-color:transparent;
    border:medium none;
    color:#000;
    font-size:15px;
    margin-left:10px;
    margin-top:7px;
}
.myform {
    margin: 0px;
    padding: 0px;
}

.submit_form{
    background-image: url(images/search_bar_mag.png);
    height: 35px;
    width: 38px;
    display: inline-block;
    position:relative;
    top:2px;
}
.submit_form:hover{
    background-image: url(images/search_bar_mag.png);
    background-position:bottom center;
}
.myform ul {
    margin: 0px;
    padding: 0px;
    display: block;
}
.myform li {
    background-image: url(images/search_bar_bg.png);
    height: 35px;
    width: 263px;
    display: block;
    font-size: 20px;
}
.myform li:hover {
    background-image: url(images/search_bar_bg.png);
    background-position:center -35px;
}

基本上我需要右边的图像作为提交表格....任何想法为什么样式关闭

Answer 1

首先将此添加到#search_area规则，然后搜索文本将显示在框

中

position: relative;
top: -10px;

我很想将搜索图标设置为表单图像元素，如下所示，并将其浮动到搜索文本旁边，除非您使用jquery或js提交搜索。

<input id="search_area" name="search" type="text" value="matt" />
<input class="search-icon" type="image" name="some-name" src="images/search_bar_mag.png" />

将此规则添加到css

.search-icon {
    float: left;
}

Answer 2

发现错误。

你正在与之后共享一条线。跨度的高度为35px，而输入的高度仅为18.它们是垂直对齐的，因此输入应低于它。从css规则.submit_form中删除height属性，然后查看更改。

要解决此问题，请添加以下样式代码：

span.submit_form {
  background-position: 0 -6px;
  height:20px !important;
}

我搜索中的图像中的图像没有排成一行

2 个答案: