在其他元素之間創建響應輸入字段

在我的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; 
}

任何和所有的技巧都感激！

來源

2013-05-09 Leon Gaban

如果你對左邊和右邊尺寸導航標誌已經固定的，那麼就可以實現與下面的代碼響應搜索欄：

例如你的標誌寬度150px和導航寬度400px

.navigation { 
    width: 100%; 
    margin:0px 0 20px ; 
    list-style:none; 
    background:#ccc; 
    width:100%; 
} 
.logo{ 
    float:left; 
    width:150px; 
} 
.head-search { 
    position:relative; 
    margin: 0 400px 0 150px; 
} 

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

#user-actions{ 
    width:400px; 
    float:right; 
}

來源

2013-05-10 06:51:00 Sukhpreet

很酷，我能夠得到這樣的工作是這樣的：http://codepen.io/leongaban/pen/wIpav仍然可以使用一些調整，但我會再次選擇你的答案:) thx！ – 2013-05-10 14:40:15

想通了！

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

我需要設置％在頭部，徽標，搜索欄和導航按鈕的所有元素......這不是最漂亮的codepen，但你應該能夠看到我做了什麼。

我無法檢查自己的答案一天，所以如果別人想出了一個更清潔的解決方案，我會檢查他們的！

來源

2013-05-09 17:13:32

在其他元素之間創建響應輸入字段

回答

相關問題