Question

我有以下HTML代码段：

<div id="container">
  <div id="left">Left block</div>

  <input type="text" />

  <div id="right">Some longer than 200px text</div>
</div>

和CSS：

#container {
  width: 100%;
}
#left {
  width: 200px;
  float: left;
  border: 1px solid black;
}
#right {
  min-width: 200px;
  float: right;
  border: 1px solid black;
}
input {
  float: left;
}

是否可以将input设置为具有所有可用空间宽度？我的意思是它应以#left右边框开头，以#right左边框结束。

Answer 1

您可以使用其他div：

执行此操作

<div id="container">
  <div id="left">Left block</div>

  <div id="right">Some longer than 200px text</div>
</div>
<div id="main">    
  <input type="text" />
</div>

#container {
  width: 100%;
}
#left {
  width: 200px;
  float: left;
  border: 1px solid black;
}
#right {
  min-width: 200px;
  float: right;
  border: 1px solid black;
}
#main {
    margin: 0 210px 0 210px;
}
input {
  width: 100%;
}

jsFiddle：http://jsfiddle.net/NQevQ/

Answer 2

使用Flex-box：

#container {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}
input {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    flex: 1;
}

Fiddle

适用于IE以外的所有主流浏览器 - Support table。

Answer 3

这是一个jQuery解决方案 -

DEMO（已更新）

的jQuery -

$(document).ready(function() {
  var w = parseInt($('#container').outerWidth()) - (parseInt($('#right').outerWidth()) + parseInt($('#left').outerWidth()));
  $('#in').css({
    border: '1px solid', //to override chrome's default- 2px inset
    width: w - 2
   });
});

Answer 4

http://jsfiddle.net/thirtydot/fbVdp/

<div id="container">
    <div id="left">Left block</div>
    <div id="right">Some longer than 200px text</div>
    <span><input type="text" value="hello" /></span>
</div>

#container span {
    display: block;
    overflow: hidden;
    border: 1px solid red;
}
#container span input {
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

#container {
  width: 100%;
}
#left {
  width: 200px;
  float: left;
  border: 1px solid black;
}
#right {
  min-width: 200px;
  float: right;
  border: 1px solid black;
}

将项目设置为具有所有可用空间宽度

4 个答案: