如何使div元素的某些部分自动调整大小？

我试图创建一个小的html片段（一个div元素）由三部分组成：一个标签，文本框和一个按钮。如何使div元素的某些部分自动调整大小？

在该div元素中，标签将位于左侧（自动大小），该按钮位于右侧（同样是自动大小），并且文本框应占用父元素div内的所有剩余空间。

这是我试过（假设我希望我的div为400个像素宽）：

<div style="width:400px"> 
    <div style="float: left">Label</div> 
    <input style="width:100%"> <!-- doesn't work --> 
    <button type='button' style='float: right'>Click</button> 
</div>

麻烦的是，我的文本框不会被自动调整大小。将“宽度= 100％”添加到文本框不起作用。

如何让它占用标签和按钮之间的所有剩余空间？理想情况下，应该通过应用一些样式来完成，而不是通过引入新的元素。

（我想这个问题是不是只涉及div元素，但是这恰好是我的工作情况。）

来源

2010-03-17 vladimir

也许这样的事情就是你想要的。是的，我知道这是作弊。是的，我同意@Paul re：label，所以我刷了他的ID。 :)

编辑：强制性Self-Referencing Demo

警告：在所有浏览器未经测试。

CSS：

div { 
    display: table; 
    width: 400px; 
    white-space: nowrap; 
} 

label { 
    display: table-cell; 
    padding-right: 3px; 
    width: 1em; 
} 

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

span { 
    display: table-cell; 
    padding-left: 6px; 
    width: 1em; 
}

HTML：

<div> 
    <label for="my-very-special-input">Label</label> 
    <input id="my-very-special-input"/> 
    <span><button type="button">Click</button></span> 
</div>

来源

2010-03-17 18:49:04 ghoppe

+1表格很好用，这个摇滚哥们！ ;-) – 2010-03-17 19:07:26

@ghoppe：非常好，正是我所需要的。 – vladimir 2010-03-18 08:32:49

我能想到使这项工作是用百分比的唯一途径。我把所有东西都放在单独的div中（可能不适用），然后将百分比分配给每个div。请看：

<div style="width=400px"> 
<div style="float:left; width:10%">Label</div> 
<div style="float: left; width:70%"><input style="width:100%"></div> <!-- doesn't work --> 
<div style="float: right width:20%"><button type='button' style=''>Click</button></div>

这绝不是一个完美的解决方案，但希望它会满足您的需求在一定程度上。

埃利奥特

来源

2010-03-17 16:55:49

expecially如果你使用 “WIDTH = 400像素” 这项工作太棒了！ ;-P – 2010-03-18 12:40:53

请问如果用overflow: hidden包裹在<div>的<input>帮助？

<div style="width: 400px;"> 
    <div style="float: left;">Label</div> 
    <div style="overflow: hidden;"> 
     <input style="width: 100%;"> 
    </div> 
    <button type="button" style="float: right;">Click</button> 
</div>

参见xHTML/CSS: How to make inner div get 100% width minus another div width。

尽管它是无关紧要的，但请注意您的标签应该是<label>。

<div style="width: 400px;"> 
    <label for="my-very-special-input" style="float: left;">Label</label> 
    <div style="overflow: hidden;"> 
     <input id="my-very-special-input" style="width: 100%;"> 
    </div> 
    <button type="button" style="float: right;">Click</button> 
</div>

来源

2010-03-17 17:27:15

如何使div元素的某些部分自动调整大小？

回答

相关问题