Question

我有一系列div框后跟一个textarea同一个类采用相同的样式，但我注意到div似乎自动填充水平宽度父母虽然textarea没有。给textarea width:100%解决了问题，但是如果我提供共享课margin-left:80px，则textarea超过父，而div框不会。

我只是想知道为什么会出现这种情况，以及是否可以使用textarea进行复制。我到目前为止最干净的解决方案是给出textarea width:calc(100%-80px)，但更喜欢更“自然”的解决方案。

以下是一些示例代码： -

HTML

<body>

    <div class="container">

        <div class="box">
        DIV
        </div>

        <div class="box">
        DIV
        </div>

        <form>
            <textarea class="box">TEXTAREA</textarea>
        </form>

    </div>

</body>

CSS

.container {
  background: #bbb;
  padding: 30px;
  box-sizing: border-box;
}

.box {
  height: 80px;
  background: #888;
  box-sizing: border-box;
  margin: 0 0 50px 80px
}

textarea {
   width: calc(100% - 80px); // CLEANISH SOLUTION
}

这是一个JSFiddle：https://jsfiddle.net/tndm2eqz/1/

Answer 1

它确实应用了CSS，但<form>介于两者之间，因此width不会被继承：https://jsfiddle.net/tndm2eqz/3/

.container {
  background: #bbb;
  padding: 30px;
  box-sizing: border-box;
}

.box {
  height: 80px;
  background: #888;
  box-sizing: border-box;
  margin: 0 0 50px 80px;
}

form {
  margin: 0 0 50px 80px;
  padding: 0;
}

textarea.box {
  width: 100%;
  display: block;
  margin:0;
  box-sizing: border-box;
}

<body>

  <div class="container">

    <div class="box">
      DIV
    </div>

    <div class="box">
      DIV
    </div>

    <form>
      <textarea class="box">TEXTAREA</textarea>
    </form>

  </div>

</body>

Answer 2

默认情况下，

textarea不是display:block你必须将display:block和width:100%;添加到你的textarea所以，为什么不把textarea放在.box div中并使textarea宽度：100 ％与块。例如

.container {
  background: #bbb;
  padding: 30px;
  box-sizing: border-box;
}

.box,.box textarea  {
  height: 80px;
  background: #888;
  box-sizing: border-box;
}
.box{
  margin: 0 0 50px 80px;

}
.box textarea {
  display: block;
  width: 100%;
}

<div class="container">
    <div class="box"> DIV </div>
    <div class="box"> DIV </div>
    <form>
        <div class="box">
            <textarea>TEXTAREA</textarea>
        </div>
    </form>
</div>

Answer 3

与div不同，block显示类型为textarea。如果您希望textarea的行为为div，请添加以下内容：

textarea{
    display: block;
}

不要忘记textarea的边框和阴影。

Answer 4

＆＃13;

    .container {
  background: #bbb;
  padding: 30px;
  box-sizing: border-box;
  width:100%;
  margin:0px;
}

.box {
  height: 80px;
  background: #888;
  box-sizing: border-box;
  margin: 0 0 50px 0;
  width:100%;
}

＆＃13;

 <body>
  
  <div class="container">
    <div class="box">
    DIV
    </div>

    <div class="box">
    DIV
    </div>

    <form>
      <textarea class="box" rows="10">TEXTAREA</textarea>
    </form>

  </div>

</body>

＆＃13;

为什么Textarea宽度和DIV宽度的表现如此不同？

4 个答案: