使HTML输入框填充容器空间

Question

使HTML输入框填充容器空间

10

有一个 <div id="MyDiv"> 元素，根据页面宽度调整大小。它包含 <input> 和 <a> 元素。

如何使 <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>

并且演示。

- va.

哦，对了，我忘了告诉你，尽量不要使用内联 CSS。 - s.lenders

6个回答

0

最好的选择是使用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/

- s.lenders

谢谢，这正是我所需要的。另外，我想知道是否仅使用HTML和CSS就可以实现？ - va.

我不知道。你总是会有一点偏差。但我不确定CSS3是否为此添加了任何内容。 - s.lenders

如果答案正是您所需的，您应该标记他的回答。我也觉得这个答案很有帮助。 - Douglas.Sesar

这在2013年可能是有道理的，但请不要在本十年或任何未来十年中这样做。jQuery并不是必要的，用于使某些东西适应窗口大小。 - ocket8888

0

您可以使用绝对定位：

<!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/

- ErDmKo

请抛弃内联CSS，因为该方案的可行性仅限于输入框填满100%的情况。您可以将按钮叠加在输入框上方，这样就不会影响输入框文本的显示了。 - s.lenders

“text drops off” - 在任何情况下，如果文本超过字段的长度。 - ErDmKo

-1

尝试使用这个 HTML：

<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>

- Sagar Dalvi

-1

我正在寻找解决这个问题的方法，或者至少我认为它是同样的问题。我也解决了它。让我解释一下。

根据浏览器的不同，文本框可能会变得太长或太短，但有时它确实符合预期。我使用@meadia构造来根据客户端视口大小缩放UI，并注意到当缩放为100％时，它完美地适合。这使我想到了一个不同的解决方案，或者更准确地说，指向了一个不同的问题。

我不确定这是否适用于所有浏览器，但我可以通过在我的CSS文件开头添加一些简单的设置（CSS重置部分）来解决它，添加以下内容：

/***************************************************/
/* Hack to make input[type='text'] fit width of
   parent element */

input {font-size: 1em;}  /* omitting [type=... deliberately */
textarea {font-size: 1em;}

/***************************************************/
/* Media scaling */

*      {margin: 0; border: 0; padding: 0;}
html   {min-width: 300px;}
body   {font-size:  80%;}  /* Default */
@media (min-width:  400px) {body {font-size:  80%;}}
@media (min-width:  600px) {body {font-size:  90%;}}
@media (min-width:  900px) {body {font-size:  95%;}}
@media (min-width: 1300px) {body {font-size: 100%;}}
@media (min-width: 1800px) {body {font-size: 110%;}}
@media (min-width: 2400px) {body {font-size: 120%;}}

显然，使用在缩放之前指定字体大小的CSS重置可以解决问题。我认为这实际上也很有道理。容易被忘记的事情是，元素并不总是从body正确继承，例如文本类型输入（以及文本区域）。

确保您在TD或DIV中为文本框设置width: 100%;样式，并且您还设置了box-sizing: border-box;。应该可以解决问题。

希望这可以帮助到您。

- Søren L. Fog

-4

只需将以下代码添加到您的<head>标签中

input{width:92%;}

- Raj

如果您在<head>标签中声明样式，则应将输入样式封装在<style>标记内，否则不会生效。输入框的宽度必须最大为90％，否则链接将无法保持内联。 - Morpheus

这是我以前的做法。它适用于 div 宽度至少为 500 像素的情况。它应该适用于从 300 像素甚至更少的页面宽度。 - va.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andyb · Accepted Answer

虽然在IE9及以下版本中无法实现，但可以通过CSS3轻松实现。IE10是第一个支持此标准的Internet Explorer版本。其他浏览器已经支持相关的Flexible Box属性。

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

input {
  -webkit-flex: 1;
}

a {
  margin: 0 10px;
}

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