Question

我需要textarea跨越网页的宽度。以下是Chromes中的开发人员工具Source提供的内容。

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Musak</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Help">API</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">




<h2>Musak</h2>

<style type="text/css">
textarea {
 width: 800px;
 height: 100px;
 background-color: black;
 font-size: 1em;
 font-weight: bold;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 border: 1px solid black;
 color: green;
}
</style>

<div>
    <textarea cols="800" id="alltext"></textarea>
    <h2>Enter command</h2>
    <input type="text" id="command" size="800" />
    <input type="button" value="Search" onclick="find();" />
    <p id="product" />
</div>


        <hr />
        <footer>
            <p>&copy; 2018 - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="/Scripts/jquery-1.10.2.js"></script>

    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>


    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="/Scripts/jquery.signalR-2.2.3.min.js"></script>
    <script>

        var uriDump = 'api/dump';
        var uriKey = 'api/key';
        var uriKey2 = 'api/key2';
        var uriDbase = 'api/dbase';

        function find() {
            var id = $('#command').val().toLowerCase();
            var res = id.split(" ");

            if (res.length > 0) {

                switch (res[0]) {
                    case "dump":
                        $.getJSON(uriDump + '/')
                            .done(function (data) {

                                var box = $("#alltext");
                                box.val(box.val() + data);
                            })
                            .fail(function (jqXHR, textStatus, err) {
                                var box = $("#alltext");
                                box.val(box.val() + err);
                            });
                        break;
                    case "dbase":
                        $.getJSON(uriDbase + '/')
                            .done(function (data) {

                                var box = $("#alltext");
                                box.val(box.val() + data);
                            })
                            .fail(function (jqXHR, textStatus, err) {
                                var box = $("#alltext");
                                box.val(box.val() + err);
                            });
                        break;
                    case "key":
                        $.getJSON(uriKey + '/' + res[1] + '/')
                            .done(function (data) {

                                var box = $("#alltext");
                                box.val(box.val() + data);
                            })
                            .fail(function (jqXHR, textStatus, err) {
                                var box = $("#alltext");
                                box.val(box.val() + err);
                            });
                        break;
                    case "key2":
                        $.getJSON(uriKey2 + '/' + res[1] + '/' + res[2] + '/')
                            .done(function (data) {

                                var box = $("#alltext");
                                box.val(box.val() + data);
                            })
                            .fail(function (jqXHR, textStatus, err) {
                                var box = $("#alltext");
                                box.val(box.val() + err);
                            });
                        break;
                    default:
                        break;
                }

            }



        }
    </script>

</body>

修改

我找到了违规的CSS ..

在我的site.css文件中：

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

Answer 1

您应该使用css将宽度设置为100％。通过这样做，textarea将根据浏览器选项卡的宽度进行拉伸。

<textarea style="width:100%"></textarea>

或进行以下更改

textarea{
width:100%
}

Answer 2

在代码中进行以下更改：

从textarea中删除cols="800"属性。
在css中将width属性的值设置为100％。

如何设置textarea在页面中伸展？

2 个答案: