css - CSS-同じ行に入力テキストとリンクを取得できません

Question

全て-

これをグーグルで検索して約20分間試しましたが、これを理解できないようです。私が検索を取得できない理由を誰かが知っていますか：同じ行にありますか？

私はdisplay：inline、display：block、float：left / right、clear：bothを試しましたが、役に立ちませんでした。クロームインスペクターを使っても、なぜ正しく機能しないのか理解できません。

編集：関連コードの貼り付け

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

対応する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

前もって感謝します！

Answer 1

あなたの問題は、inputinが100％のbase.cssaaを持っているということです。widthこれは、の幅inputが常にその親要素のサイズの100％になることを意味します。これには、「search：」テキストも含まれます。これを100％未満に変更すると、正常に機能するはずです。

例えば：

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

もちろん、width:50%これは使用できるものの一例にすぎません。width:autoおよび他の特定の幅が機能します。それをいじって、自分に最適なものを確認してください。

Answer 2

あなたのbase.cssファイルはを与えてinputいwidth: 100%;ます。与えてみてくださいwidth: auto

Answer 3

CSS：

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

Answer 4

「Search：」をそれ自体に入れるだけ<li>で、簡単にすばやく修正できます。