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

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

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

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

当前回答

尽管每个人都讨厌表格的布局，但它们确实在这方面有所帮助，要么使用显式的表格标签，要么使用display:table-cell

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label&nbsp;text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>

2009-04-21 16:47:12

其他回答

这里给出的答案有点过时了。所以，在这里，我使用现代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

你可以试试这个:

div#panel { border:solid; width:500px; height:300px; } div#content { height:90%; background-color:#1ea8d1; /*light blue*/ } div#panel input { width:100%; height:10%; /*make input doesnt overflow inside div*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /*make input doesnt overflow inside div*/ } <div id="panel"> <div id="content"></div> <input type="text" placeholder="write here..."/> </div>

2016-03-14 09:35:13

非常简单的技巧是使用CSS calc公式。所有现代浏览器，IE9，各种移动浏览器都应该支持这个功能。

<div style='white-space:nowrap'>
  <span style='display:inline-block;width:80px;font-weight:bold'>
    <label for='field1'>Field1</label>
  </span>
  <input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' />
</div>

2015-04-28 09:03:49

尽管每个人都讨厌表格的布局，但它们确实在这方面有所帮助，要么使用显式的表格标签，要么使用display:table-cell

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label&nbsp;text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>

2009-04-21 16:47:12

如果你正在使用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

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

推荐文章

最新文章

标签