Question

我的问题如下：

我有一个包含多个输入字段的联系表单。输入字段位于正常页面上，大约是它们所在div的一半。现在，当通过浏览器观察我的网页时，会出现问题。页面本身可以比输入字段小。

我想要的是以下内容：

它调整大小以适应div而不是div之外的重叠/溢出。

我已尝试在搜索引擎优化和谷歌上搜索，但要么我正在搜索错误的内容，要么我找不到它。

HTML：

<div id="contact-formulier">
    <form method="post" action="contact.php">
        <label>Naam*</label>
        <input name="naam" placeholder="Graham Neal" required>
    </form>
</div>

CSS：

input, textarea {
   width:439px;
   height:27px;
   background:#efefef;
   border:1px solid #dedede;
   padding:10px;
   margin-top:3px;
   font-size:0.9em;
   color:#3a3a3a;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
}

textarea {
   height:213px;
}

input:focus, textarea:focus {
   border:1px solid #97d6eb;
}

Answer 1

将表格宽度设置为100％，然后将输入和文本区域宽度设置为大约90％。我希望这是你所寻求的结果。就像那样：

form {
    width: 100%;
    float: left;
}
/* Style the text boxes */
input, textarea {
    width:90%;
    height:27px;
    background:#efefef;
    border:1px solid #dedede;
    padding:10px;
    ...
}

Answer 2

当你放入css时宽度固定，它不会发生。

你可以用百分比来获得这个，但是根据我的经验，每次都不能完美地工作，特别是如果你做的事情比简单的小提琴练习要复杂得多，或者如果你把这个例子嵌入其他东西中

最好的方法是使用jquery强制宽度：

$(document).ready(function() {
    $(window).resize(function() {
        $('input').width( $('#contact-formulier').width() - 22);
    });
});

请参阅：http://jsfiddle.net/Lnnxsrwj/2/

当div变小时，输入框必须调整大小

2 个答案: