如何使表格正确自动缩放？_JavaScript

理想情况下，我希望表单的textarea及其下方的所有内容随着浏览器宽度的变化而保持居中。 我正在Chrome上进行测试。 如何使表单始终居中并随着浏览器宽度的减小而使textarea宽度减小？

注意-我只能发布有问题的2个链接，因此请查看我的评论以获取第三个图像。

半屏（这是您仅将浏览器的右端向左拖动时的情况。请注意，您添加资金的行已向左对齐而不是居中对齐）

最小宽度屏幕（这是您可以将浏览器的边缘向左拖动的最远的屏幕。这里的问题是文本区域的手柄（右下角）不再可见。我希望将文本区域的宽度调整为浏览器的较小尺寸）：

的HTML

<form class="form-inline" align="center">

    <!-- Section to type question-->
        <div class="form-group" style="display:block">
            <textarea class="form-control" style="width:100%" rows="5"></textarea>
        </div>

    <!--Section to add money---->
        <div class="input-group" id="AddMoney">
          <span class="input-group-addon">$</span>
          <input id="EnterMoney" type="text" class="form-control" onkeypress='validate(event)'>
        </div>

    <!--Section to add file-->
        <div id="AddFile">
            <a href="#" onclick="document.getElementById('uploadFile').click(); return false;" />Add File</a>
            <input type="file" id="uploadFile" style="visibility: hidden;" />
        </div>

        <div id="imagePreview"></div>

    <!--Section for the Submit button-->
        <div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>

的CSS

form {
    width:500px;
    margin:50px auto;
}
#imagePreview {
    width: 100px;
    height: 100px;
    background-position: center center;
    background-size: cover;   
    display: inline-block;
}
#AddMoney {
    width:150px;
    top:10px;
}
#AddFile {
    position:relative;
    top:10px;
}

Java脚本

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

<!-- jQuery ui -->
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

由于您将jQuery添加为标签，因此我假设您可以使用jquery解决方案。 我建议您使用一个简单的功能，将元素置于窗口调整大小的中心。 它可能看起来像这样：

function center(){
    var width = $(window).width();
    var width2 = width - $('#elementToCenter').width();
    var newMargin = width2 / 2;
    $('#elementToCenter').css("margin-left", newMargin);
}
$(window).resize(center);

可变width表示窗口的总宽度。 要获得所讨论元素两侧的空白，请从该总数中减去其宽度，以得到width2 。 现在，将其除以2可得到每一侧的空白量。 最后，您可以将（ newMarin ）设置margin-left margin-right如果感觉很倾斜，则设置为margin-right ），并且该元素应显示在页面的中央。

您可能更喜欢此解决方案，因为它需要您引入的唯一框架是jQuery，而且看起来您已经完成了此工作。

干杯!

只要摆脱你的CSS。 Bootstrap会自己处理所有事情。 在超级简单的情况下，您甚至不必使用媒体标签。

  form {
    max-width:500px;
    margin:50px auto;
  }

您可以在调整屏幕大小，然后看到一切都在调整大小。

我认为这会起作用，但是...

只需进入即可学习所有这些知识。 下载免费的Bootstrap模板开始学习。

CSS修复

form {
    width: 100%;
    max-width: 500px;
    margin:50px auto 50px auto;
}

#imagePreview {
    width: 100px;
    height: 100px;
    background-position: center center;
    background-size: cover;   
    display: inline-block;
}

#AddMoney {
    width:150px;
    margin-top:10px;
}

#AddMoney input {
width: 90%;
float:right;
}

#AddMoney span
{
width:5%;
}

#AddFile {
    display: block;
    position:relative;
    margin-top:10px;
}

form input,
form textarea
{
    width: 100%;
    max-width: 500px;
}

/* Small to Medium screens or higher */
@media (min-width: 768px) {
    form,
    form input,
    form textarea
    {
        max-width: 800px;
    }
}

如何使表格正确自动缩放？

问题描述

1楼

2楼

3楼