3

ヘッダーで検索入力を応答的に動作させるのに問題があります。

私のCodepenには、基本的なヘッダー、左側にロゴ、中央に検索バー、右側にナビゲーション ボタンがあります。私の目標は、中央の検索/入力バーを反応させ、ロゴとナビゲーション ボタンの間のスペースを左右の余白で埋めるように伸ばすことです。

私の試みでは、下部の入力の基本的な応答性を 100% に設定することはできませんでした。

*この問題にどのように取り組みますか? *

http://codepen.io/leongaban/pen/wIpav

私の入力：

<div class="navigation">

<div class="head-search">
  This input should be responsive
  <input class="txtinput" type="text"/>
    <img src="http://leongaban.com/_stack/images/search_button.png" alt="search"/>
</div>

<nav id="user-actions">
    <ul>
        <li class="btn-blue user-action" data-btn="login" data-pane="login">Log In</li>
        <li class="btn-purple user-action" data-btn="signup" data-pane="signup">Sign Up</li>
    </ul>
</nav>


.navigation {
    width: auto; float:right; margin:0px; list-style:none; background:#ccc;
    margin-bottom:20px;
}
.head-search {
    width: auto;
    float: left;
}

.head-search input {
    float: left;
    width: 100%;
    /* max-width: 290px; */
    height: 25px;
    padding: 0 5px;
    margin: 10px 5px 10px 0;
}

どんなヒントでも大歓迎です！

4

2 に答える 2

0

理解した！

http://codepen.io/leongaban/pen/fBDhw

ヘッダー、ロゴ、検索バー、ナビゲーション ボタンのすべての要素に % をセットアップする必要がありました...これは最も美しい codepen ではありませんが、私が行ったことを確認できるはずです。

私は自分の答えを一日中チェックすることはできないので、他の誰かがよりクリーンなソリューションを思いついたら、代わりに彼らの答えをチェックします!

于 2013-05-09T17:13:32.617 に答える