CODEWITHSUNDEEP
htmlcssinline
Amar Syla
Amar Syla

Reputation: 3653

Horizontally display span text and input

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.

Upvotes: 1

Views: 90

Answers (3)

KDS
KDS

Reputation: 137

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

.login, form.search{
    display:inline
}

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

Upvotes: 1

Vinc 웃
Vinc 웃

Reputation: 1247

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

.login{
   float: left;
}

Here's the jsFiddle

Upvotes: 1

Musa
Musa

Reputation: 97672

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/

Upvotes: 1

Related Questions