一個居中的搜索框+按鈕，最大寬度和最大寬度的縮小和縮小

我被卡住得到這個HTML/CSS的工作。一個居中的搜索框+按鈕，最大寬度和最大寬度的縮小和縮小

我有3個輸入，一個搜索框和2個按鈕。當瀏覽器寬度足以處理它時，我希望搜索框增長到400px的最大寬度，但也會縮小到100％的寬度減去移動瀏覽器等2個按鈕的寬度。我不想按鈕來包裝。

這是我想要的東西：

桌面/大屏幕顯示：

|               | 
|   SSSSSSSSSSSSSSSSSSSSSSSSSSSSSS A B   | 
|               |

手機/小型顯示器：

|     | 
| SSSSSSSSSSSS A B | 
|     |

這裏就是我這麼遠。使用div方法時，不考慮按鈕的組合寬度，並在瀏覽器縮小時滾動頁面。表格方法很近，但瀏覽器放大時，按鈕擁抱瀏覽器的右側。

格：

<html> 
    <head> 
    <meta name="viewport" 
    content="width=device-width, initial-scale=1" /> 
    <style type="text/css"> 
     .search { 
      text-align: center; 
      padding:5px; 
      white-space:nowrap; 
     } 
    </style> 
    </head> 
    <div id="SearchDiv" class="search"> 
    <input type="text" id="SearchTextBox" x-webkit-speech="" 
    speech="" style="width:100%;max-width:400px" /> 
    <input type="submit" value="Find" id="FindButton" style="" /> 
    <input type="submit" value="More" id="MoreButton" style="" /> 
    </div> 
</html>

表：

<html> 
    <head> 
    <meta name="viewport" 
    content="width=device-width, initial-scale=1" /> 
    <style type="text/css"> 
    .search { 
     text-align: center; 
     padding:5px; 
    } 
    </style> 
    </head> 
    <table class="search" align="center" width="100%" 
    cellpadding="0"> 
    <tr> 
     <td width="100%"> 
     <input type="text" id="SearchTextBox" x-webkit-speech="" 
     speech="" style="width:100%;max-width:400px;" /> 
     </td> 
     <td> 
     <input type="submit" value="Find" id="FindButton" /> 
     </td> 
     <td> 
     <input type="submit" value="More" id="MoreButton" /> 
     </td> 
    </tr> 
    </table> 
</html>

皓嘉的建議（工作不正常）

格：

<html> 
    <head> 
    <meta name="viewport" 
    content="width=device-width, initial-scale=1" /> 
    <style type="text/css"> 
     .search { 
      text-align: center; 
      padding:5px; 
      white-space:nowrap; 
      max-width:400px; 
     } 
    </style> 
    </head> 
    <div id="SearchDiv" class="search"> 
    <input type="text" id="SearchTextBox" x-webkit-speech="" 
    speech="" style="width:100%;" /> 
    <input type="submit" value="Find" id="FindButton" style="" /> 
    <input type="submit" value="More" id="MoreButton" style="" /> 
    </div> 
</html>

表：

<html> 
    <head> 
    <meta name="viewport" 
    content="width=device-width, initial-scale=1" /> 
    <style type="text/css"> 
    .search { 
     text-align: center; 
     padding:5px; 
    } 
    </style> 
    </head> 
    <table class="search" width="100%" 
    cellpadding="0"> 
    <tr> 
     <td align="right"> 
     <input type="text" id="SearchTextBox" x-webkit-speech="" 
     speech="" style="width:100%;max-width:400px;" /> 
     </td> 
     <td align="left"> 
     <input type="submit" value="Find" id="FindButton" /> 
     <input type="submit" value="More" id="MoreButton" /> 
     </td> 
    </tr> 
    </table> 
</html>

來源

2012-06-16 user1066539

對於div方法，可以通過在div（包含元素）上設置max-width而不是文本框來考慮按鈕的寬度。

對於表格方法，可以通過將兩個按鈕放在一個td中，然後在文本框td上的按鈕td和align = right上設置align = left來避免使按鈕擁抱右側。您還需要從文本框中刪除width = 100％td。事情是這樣的：

<tr> 
    <td align="right"> 
    <input type="text" id="SearchTextBox" x-webkit-speech="" 
    speech="" style="width:100%;max-width:400px;" /> 
    </td> 
    <td align="left"> 
    <input type="submit" value="Find" id="FindButton" /> 
    <input type="submit" value="More" id="MoreButton" /> 
    </td> 
</tr>

來源

2012-06-16 02:37:17 Zhihao

感謝您的回覆，但我沒有得到好的結果。現在使用div方法，整個事情是左對齊的，按鈕仍然變得模糊。使用該表格時，如果不將文本框寬度設置爲100％，則在放大瀏覽器時不會展開。無論哪種方式，功能都非常好，但最終的結果並不是完全居中。我用我的建議更新了我原來的帖子。 – user1066539

從我對問題的理解，請嘗試以下解決方案 -

粘貼僅將更改代碼 -

<div id="SearchDiv" class="search"style="min-width:480px;" > 
<input type="text" id="SearchTextBox" x-webkit-speech="" 
speech="" style="width:70%;min-width:100px" />

Full Demo

注：如果內容沒有空間適合可用的顯示屏 - 它會將走出了視野，但仍然是visib通過滾動。所以，玩寬度來優化顯示。我不確定您是否可以在給定的寬度上保留搜索欄，並且期望按鈕在沒有任何空間留在當前視圖中時也保持在同一視圖中。

來源

2012-06-16 08:32:40

一個居中的搜索框+按鈕，最大寬度和最大寬度的縮小和縮小

回答

相關問題