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