Question

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

如何在<a>和<div>拉伸的右侧对<input>对齐，以适应<div>左侧和<a>之间的自由空间{1}}是对的吗？

同样，<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>

和demo。

Answer 1

这可以通过CSS3轻松完成，尽管它不适用于IE9或更低版本。 IE10是第一个支持该标准的Internet Explorer版本。其他浏览器already support是相关的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>

Answer 2

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

Answer 3

您可以使用绝对定位：

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

Answer 4

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

取决于浏览器，我使文本框变得太长或太短，但也注意到有时文本框确实符合预期。我使用了@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重置指定字体大小来解决此问题。我认为这实际上也是有道理的。容易忘记的是，元素并非总是正确地从主体继承而来，在这种情况下，是文本类型输入（还有文本区域）。

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

希望这会有所帮助。

Answer 5

试试这个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>

Answer 6

只需在<head>标记

中添加此内容即可

input{width:92%;}

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

6 个答案: