Question

最近我尝试将文本框用于发布帖子。主要问题 - 文本框不想正确匹配，即使它显然应该。这是图像：

这是我为这个问题准备的JSFiddle文件：

https://jsfiddle.net/Ch3shireDev/u0j5rgud/4/

看起来文本框自然会向右扩展。

＆＃13;

body {
  margin: 0;
  height: 100%;
  width: 100%;
}

.post {
  display: flex;
  background-color: lightgrey;
  border-radius: 10px;
  /* width: auto; */
  height: 300px;
  padding: 5px 5% 5px 5%;
  margin: 20px;
  box-shadow: #888888 1px 1px 1px 1px;
}

.background {
  margin: 5px;
  border: 1px solid;
  padding: 0;
}

textarea {
  resize: none;
  width: 80%;
  margin: 10px;
}

.titlebox {
  height: 20px;
}

.message {
  height: 100px;
}

.background {
  width: 100%;
  padding: 10px;
}

textarea {
  margin: 0;
  height: auto;
  width: 100%;
}

.input {
  background-color: red;
  padding: 5px;
}

.buttons {
  float: right;
  padding-top: 5px;
  padding-left: 5px;
  margin-bottom: 0;
  margin-right: 0;
  padding-right: 0;
}

＆＃13;

<div class=post>
  <div class=background>
    <div class=title>
      <h3>
        Publish post
      </h3>
    </div>

    <div class=input>
      <form>
        <textarea class=message cols=50></textarea>
      </form>
    </div>

    <div class=buttons>
      <input type="submit" value="Preview" />
      <input type="submit" value="Send" />
    </div>

  </div>
</div>

＆＃13;

我该怎么做才能让文本框适合？

Answer 1

对于您的textarea，只需添加SELECT t.id, t1.category_name AS TRANSLATION_1, t2.category_name AS TRANSLATION_2 FROM (SELECT ID, MIN(language_id) language_id FROM test GROUP BY ID) t LEFT JOIN test t1 ON t1.id = t.id AND t1.language_id = t.language_id LEFT JOIN test t2 ON t2.id = t.id AND t2.language_id <> t.language_id WHERE (t1.language_id IS NULL OR t2.language_id IS NULL)。

id  category_name   category_name
7   Dolls           NULL

https://jsfiddle.net/u0j5rgud/6/

box-sizing: border-box;：宽度和高度属性（以及最小/最大属性）包括内容，填充和边框

Answer 2

你的css中有2个textarea规则，尝试删除wodth设置为100％的规则

Answer 3

从<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/dijit/calcite.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/dojo/1.13.0/dojo/dojo.js"></script> <script> require([ "dojox/charting/Chart", "dojox/charting/Chart2D", "dojox/charting/action2d/MoveSlice" , "dojox/charting/action2d/Tooltip", "dojo/ready"], function(Chart, Chart2D, MoveSlice, Tooltip, ready){ ready(function(){ var chart1 = new Chart("He1"); chart1.addPlot("default", { type: "Pie" }); chart1.addSeries("He1", [ {y: 1, text: 1}, {y: 1, text: 2} ]); new Tooltip(chart1, "default"); new MoveSlice(chart1, "default"); chart1.render(); }); }); </script> </head> <body class="calcite"> <div> <div id="He1" style="width: 140px; height: 140px; "></div> </div> </body> </html>

中删除填充

textarea

文本框不适合分裂

3 个答案: