水平显示跨度文本和输入

时间:2013-05-31 15:19:52

标签: html css inline

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

以下是代码:

<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/

感谢。

3 个答案:

答案 0 :(得分:1)

将范围放在表格

<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/

答案 1 :(得分:1)

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

.login{
   float: left;
}

这是jsFiddle

答案 2 :(得分:1)

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

.login, form.search{
    display:inline
}

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