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 - 调整浏览器

回答

相关问题