样式输入元素以填充其容器的剩余宽度

假设我有一个这样的html片段:

<div style="width:300px;">
    <label for="MyInput">label text</label>
    <input type="text" id="MyInput" />
</div>

这不是我的确切代码，但重要的是，在固定宽度的容器中，在同一行上有一个标签和一个文本输入。我如何样式的输入，以填补容器的剩余宽度没有包装和不知道标签的大小?

当前回答

请使用flexbox进行此操作。你有一个容器，它将把它的子容器弯曲成一行。第一个子进程根据需要占用它的空间。第二个弯曲以占据所有剩余的空间:

< div style = "显示屏:flex; flex-direction row”> < for =“MyInput >标签label 短信< - >标签 <输入类型=“文本”id=“my输入”样式=“flex:1”/> < / div >

2015-09-04 02:19:32

其他回答

实现这一目标的最简单方法是:

CSS:

label{ float: left; }

span
{
    display: block;
    overflow: hidden;
    padding-right: 5px;
    padding-left: 10px;
}

span > input{ width: 100%; }

HTML:

<fieldset>
    <label>label</label><span><input type="text" /></span>
    <label>longer label</label><span><input type="text" /></span>
</fieldset>

看起来像:http://jsfiddle.net/JwfRX/

2012-12-01 11:27:04

我建议使用Flexbox:

不过，一定要添加适当的供应商前缀! {形式宽度:400 px; 边框:1px纯黑色; 显示:flex; ｝输入{ flex: 2; ｝输入，标签{ 保证金:5 px; ｝ <形式方法=“post”> <label for="myInput">样本标签</label> <input type="text" id="myInput" placeholder="Sample input "/> > < /形式

2014-07-09 05:18:41

如果你正在使用Bootstrap 4:

<form class="d-flex">
  <label for="myInput" class="align-items-center">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>

更好的是，使用Bootstrap内置的东西:

  <form>
    <div class="input-group">
      <div class="input-group-prepend">
        <label for="myInput" class="input-group-text">Default</label>
      </div>
      <input type="text" class="form-control" id="myInput">
    </div>
  </form>

https://jsfiddle.net/nap1ykbr/

2019-09-03 02:42:48

请使用flexbox进行此操作。你有一个容器，它将把它的子容器弯曲成一行。第一个子进程根据需要占用它的空间。第二个弯曲以占据所有剩余的空间:

< div style = "显示屏:flex; flex-direction row”> < for =“MyInput >标签label 短信< - >标签 <输入类型=“文本”id=“my输入”样式=“flex:1”/> < / div >

2015-09-04 02:19:32

这里给出的答案有点过时了。所以，在这里，我使用现代flexbox最简单的解决方案。

.input-container { 显示:flex; ｝输入{ flex-grow: 1; margin-left: 5 px; ｝ < div风格= "宽度:300 px;" > < div class = "输入容器”> <label for="MyInput">label text: </label> <input type="text" id="MyInput"/> < / div > < div class = "输入容器”> <label for="MyInput2">长标签文本:</label> <input type="text" id="MyInput2" /> < / div > < / div >

2022-09-09 20:06:10

样式输入元素以填充其容器的剩余宽度

推荐文章

最新文章

标签