CODEWITHSUNDEEP
css
Geesu
Geesu

Reputation: 6008

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

All-

Googled this and tried for about 20 minutes but just can't seem to figure this out. Does anyone know why I can't get the Search: to be on the same line?

I've tried the display: inline, display: block, float:left/right, clear:both, but to no avail. Even w/chrome inspector I can't figure out why it 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!

Upvotes: 0

Views: 126

Answers (4)

Dom
Dom

Reputation: 40459

CSS:

input[name="quest_search"]{
    width: auto;
}

Upvotes: 1

crowjonah
crowjonah

Reputation: 2878

Your base.css file is giving the input a width: 100%;. Try giving it a width: auto

Upvotes: 2

Michael
Michael

Reputation: 7092

Just put "Search:" in it's own <li> is a simple quick fix.

Upvotes: 0

JSW189
JSW189

Reputation: 6325

Your issue is that the input in base.css has a a width of 100%. This means that the width of the input will always be 100% of the size of its parent element, which also contains the "search: " text. Change this to something less than 100% and it should work fine.

For example:

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

Of course, width:50% is just one example of what you can use. width:auto and other specific widths will work. Just play around with it and see what works best for you.

Upvotes: 3

Related Questions