使HTML输入延伸以填充容器中的空间

有一个<div id="MyDiv">元素，其大小取决于页面宽度。它包含<input>和<a>元素。使HTML输入延伸以填充容器中的空间

我怎样才能让<a>对齐由<div>的右侧和<input>拉伸，以适应<div>的左侧和<a>的右侧之间的自由空间？

另外，<a>不应该跳到下一行，并且容器上还定义了min-width和max-width。这里是代码：

<div id="MyDiv" style="background:#AAAAAA; width:100%; min-width:300px; max-width:600px;"> 
    <input type="text" id="MyInput"/> 
    <a id="MyButton" href="#">Button</a> 
</div>

and demo。

来源

2013-03-08 va.

Ø是啊，我忘了告诉你，尽量不使用内联CSS。 – 2013-03-08 10:18:21

-5

就在您的<head>标签添加此

input{width:92%;}

来源

2013-03-08 09:32:48 Raj

如果您在'head tag'中说，那么您应该将输入样式包装到' – Raj 2013-03-08 09:40:18

最好的办法是使用jQuery来计算宽度。试试这个：

$(window).bind("resize", function(){ 
    fitInput(); 
}); 
//resize on window change 

$(document).ready(function(){ 
    fitInput(); 
}); 
//resize after loading 

function fitInput(){ 
    var divW = $("#MyDiv").width(); 
    var buttonW = $("#MyButton").width(); 
    $("#MyInput").width(divW - buttonW - 10); 
} 
//resize function

小提琴：http://jsfiddle.net/Burnacid/aGHqV/4/

来源

2013-03-08 09:37:18

谢谢，这正是我所需要的。此外，我想知道是否甚至可以使用HTML和CSS？ – 2013-03-08 09:42:32

不是我所知道的。你会一直稍微偏离。我不知道CSS 3是否为此添加了任何内容。 – 2013-03-08 09:48:54

如果它正是你需要的，你应该标记他的答案。我发现这个答案也有帮助。 – 2013-09-17 02:17:37

-1

试试这个网站：

<div id="MyDiv" style="background:#AAAAAA; width:100%; min-width:300px; max-width:600px;"> 

     <input type="text" id="MyInput" style="width:74%;float:left"/> 

     <a id="MyButton" href="#" style="width:24%;float:right">Button</a> 

    </div>

来源

2013-03-08 09:43:41

您可以使用绝对定位：

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
      <div id="MyDiv" style="position:relative;background:#AAAAAA; min-width:300px; max-width:600px;padding:0px 2px"> 
       <input type="text" id="MyInput" style="padding:0px;margin:0px;border:0px;width:100%;"/> 
       <a id="MyButton" href="#" style="position:absolute;right:0px;top:0;padding:0px 2px; background:#aaa;">Button</a> 
      </div> 
     <body> 
</html>

http://jsfiddle.net/uPZcW/

来源

2013-03-08 10:13:16 ErDmKo

丢掉内联的css plz。这是一个很好的sollution到输入填充100％的点。因为你在输入文本的顶部按钮层掉落 – 2013-03-08 10:17:33

“文本掉落” - 无论如何，如果文本超过了字段的长度。 – ErDmKo 2013-03-08 10:22:10

尽管在IE9或更低版本中无法使用，但可以使用CSS3轻松完成。 IE10是支持该标准的第一个Internet Explorer版本。其他浏览器already support通过前缀或前缀不变的规则的属性。

See demo，它只是Webkit，但您可以为Flexible Box规则添加其他浏览器供应商前缀以启用对Firefox和Opera的支持。

CSS

div { 
    background:#aaa; 
    width:100%; 
    min-width:300px; 
    max-width:600px; 
    display: -webkit-flex; 
} 

input { 
    -webkit-flex: 1; 
} 

a { 
    margin:0 10px; 
}

HTML

<div> 
    <input type="text"/> 
    <a href="#">Button</a> 
</div>

来源

2013-03-08 10:20:44 andyb

虽然CSS 3有东西，TY。另一个新东西了解 – 2013-03-08 10:30:51

输入不会延伸到Safari或移动设备等webkit引擎。您需要将其放在块元素（如div）中或使其显示：阻止自己以获得预期的结果。 – Javarome 2014-02-10 10:57:52

使HTML输入延伸以填充容器中的空间

回答

相关问题