Saturday, 15 August 2015

css3 - CSS - Unable to get input text and a link on the same line -



css3 - CSS - Unable to get input text and a link on the same line -

all-

googled , tried 20 minutes can't seem figure out. know why can't search: on same line?

i've tried display: inline, display: block, float:left/right, clear:both, no avail. w/chrome inspector can't figure out why isn't working properly.

edit: pasting relevent code

<li>search: <input type="text" name="quest_search"></li>

corresponding css:

header { background: #f6f6f6; height: 58px; border-bottom: 1px solid #eaeaea; margin-bottom: 60px; } /* social links */ header aside ul { padding-top: 18px; } /* main navigation */ header .select-menu { display: none; } header nav { position: relative; } header nav ul { list-style: none; float: right; padding: 22px 0px 0px 0px; } header nav ul li { float: left; margin-left: 30px; position: relative; } header nav ul li a{ color: #b5b5b5; font-size: 12px; -webkit-transition:color 0.2s ease-in; -moz-transition:color 0.2s ease-in; -o-transition:color 0.2s ease-in; transition:color 0.2s ease-in; } header nav ul li a:hover { color: #777; } header nav ul li.current a{ color: #555; font-weight: bold; } header nav span.arrow { width: 24px; height: 13px; background: url('../images/light-nav_arrow.png') no-repeat; display: none; position: absolute; top: 58px; }

http://dump.tanaris4.com/so/cfs.html

thanks in advance!

your issue input in base.css has a width of 100%. means width of input 100% of size of parent element, contains "search: " text. alter less 100% , should work fine.

for example:

input[type="password"], input[type="text"], input[type="email"] { width: 50%; }

of course, width:50% 1 illustration of can use. width:auto , other specific widths work. play around , see works best you.

css css3

No comments:

Post a Comment