水平显示跨度文本和输入

I want these two elements to be displayed inline.

我希望这两个元素以内联方式显示。

Here is the code:

这是代码:

<span class="login">Login <i class="icon-user"></i></span>

<form action="#" class="search">
    <input type="search" class="search-input"/>
</form>

http://jsfiddle.net/wkprG/

Thanks.

3 个解决方案

#1

Put the span inside the form

将跨度放在表单中

<form action="#" class="search">
   <span class="login">Login <i class="icon-user"></i></span>
   <input type="search" class="search-input"/>
</form>

http://jsfiddle.net/wkprG/2/

#2

you need to add float:left; to the login class :

你需要添加float:left;到登录类:

.login{
   float: left;
}

Here's the jsFiddle

这是jsFiddle

#3

You can solve it in few ways. One of them is

你可以通过几种方式解决它。其中之一是

.login, form.search{
    display:inline
}

http://jsfiddle.net/wkprG/6/