有一个<div id="MyDiv">元素根据页面宽度调整大小。它包含<input>和<a>元素。
如何使<a>的右侧对齐<div>并拉伸以适合左侧和右侧<input>之间的可用空间？<div><a>
此外，不应该跳转到下一行，并且容器上<a>也有定义。这是代码：min-widthmax-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>
和演示。
这可以通过 CSS3 轻松完成，尽管它在 IE9 或更低版本中不起作用。IE10 是第一个支持该标准的 Internet Explorer 版本。其他浏览器已经支持相关的灵活框属性。
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>最好的选择是使用 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/
您可以使用绝对定位：
<!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>
试试这个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>
我正在寻找解决这个问题的方法，或者至少我认为这是同一个问题。我也解决了。让我解释。
根据浏览器的不同，我让文本框变得太长或太短，但也注意到它有时确实符合预期。我使用@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 重置可以解决问题。我认为这实际上也很有意义。容易忘记的是元素并不总是从正文中正确继承，在这种情况下是文本类型输入（还有文本区域）。
确保您正在width: 100%;为 TD 或 DIV 中的文本框设置样式，并且您也在设置box-sizing: border-box;. 应该让它工作。
希望这可以帮助。
只需将其添加到您的<head>标签中
input{width:92%;}