HTML - 調整瀏覽器

當我需要在寬度的按鈕，標籤和文本框利用這最後一個自動調整我想有一個搜索格在那裏我有一個：
1）按鈕
2）標籤
3 ）文本框HTML - 調整瀏覽器

我的目標：
編輯框中會自動調整到它的最大寬度在默認情況下，每當我身體調整瀏覽器頁面，而不會向下移動！

我什至不知道這是你將要使用DIV但這裏是我試圖（和失敗）：

<div id="search">  
    <div id="searchbtn"> 
     <input id="btnSeach" type="button" value="Search" /> 
     Search: 
    </div> 
    <div id="searchtxt"> 
     <input id="txtSearch" name="txtSearch" type="text" value="" /> 
    </div> 
</div>

的CSS是這樣的：

div#search 
{ 
    height: 30px; 
    border: 1px solid #80808D; 
    padding: 5px 0px 5px 0px; 
} 

div#searchbtn 
{ 
    float: left; 
    display: inline; 
    padding: 0px 10px 0px 10px; 
} 

div#searchtxt 
{ 
    float: left; 
    width: auto; 
    display: inline; 
    padding-right: 10px; 
}

我一直希望寬度：auto意味着div會自動展開（rsss）。

我嘗試在文本框上放置90％的寬度，但在調整大小時效果不佳。
我試圖在div div searchtxt上放一些寬度，但在調整大小時再次無法正常工作。

如果使用格是前進的方向，這將是對各種資料覈實正確的CSS？
如果這不是...的方式，那麼還有什麼其他方法可以更好地工作？

謝謝。

來源

2011-03-30 SF Developer

你有沒有額外的CSS風格這些元素？ – 2011-03-30 21:27:19

@Vinay使用'float：left;'查看更新後的原始文章 – 2011-03-30 21:43:03

，將這些元素縮小爲其內容的大小。 – drudge 2011-03-30 21:49:06

使用一些掛羊頭賣狗肉display: ...

Live Demo（在FireFox只有3.6.x的測試）

<style type="text/css"> 
div#search { 
    border: 1px solid #80808D; 
    display: table; 
    height: 30px; 
    padding: 5px 0px 5px 0px; 
} 

div#searchbtn { 
    padding: 0px 10px 0px 10px; 
    white-space: nowrap; 
} 

div#searchtxt { 
    display: table-cell; 
    padding-right: 10px; 
    width: 100%; 
} 
input#txtSearch { 
    width: 100%; 
} 
</style> 

<div id="search"> 
    <div id="searchbtn"> 
     <input id="btnSeach" type="button" value="Search" /> 
     Search: 
    </div> 
    <div id="searchtxt"> 
     <input id="txtSearch" name="txtSearch" type="text" value="" /> 
    </div> 
</div>

注意：Internet Explorer 8中（和更高）支持屬性值「inline-table」，「run-in」，「table」，「table-caption」，「table-cell」，「table-column」，「table-column-group」，「table-row」，「table-row-group」和「只有在指定了！DOCTYPE的情況下才繼承「。

來源

2011-03-30 22:04:55 drudge

謝謝...作品像一個魅力。 – 2011-03-30 22:20:16

我的解決方案使用'display：table;'和'display：table-cell;'，所以是的，你應該（不管）。 – drudge 2011-03-30 22:21:36

..opps我剛剛注意到，感謝您的快速響應。因此，任何特定的DOCTYPE爲此工作？我應該把它放在所有的瀏覽器上，否則我需要檢查瀏覽器類型？ – 2011-03-30 22:24:11

-1

如果您使用CSS，則可以左右填充以便展開。

來源

2011-03-30 21:27:06

我相信「填充」只是增加了一些額外的邊，但我不調整瀏覽器時自動擴展。 – 2011-03-30 21:40:35

您是否試過在div中添加min-width +％width，然後將width:100%添加到輸入中？

http://jsfiddle.net/jordanlewis/HtevS/

來源

2011-03-30 21:51:40

..這個想法看起來不錯，但是在你的文本頁面上，TextBox位於下面（不與Button保持同一級別）。 – 2011-03-30 22:04:25

謝謝...我不知道有**最小寬度** :) – 2011-03-30 22:15:46

好吧，我發現這將保留一切在同一行的另一種方法：

http://jsfiddle.net/jordanlewis/jtNEa/

HTML

<div id="search"> 
    <input id="btnSeach" type="button" value="Search" /> 
    <label for="txtSearch">Search</label> 
    <input type="text" name="txtSearch" id="txtSearch" />

CSS

#search { 
    display:table; 
    width: 100%; 
} 

label { 
    padding-right:10px; 
} 

input { 
    display:table-cell; 
    width:95%; 
} 

label { 
    display:table-cell; 
    width:10px ; 
}

來源

2011-03-30 22:12:29

按鈕...也似乎調整大小： - ） – 2011-04-01 07:23:02

HTML - 調整瀏覽器

回答

相關問題