Question

我在评论框中设置的所有内容的宽度均为100％。 div的填充为10px。但是，文本区域以某种方式进入了该填充，但仅在右侧。有点难以解释，但这是一张照片：https://i.imgur.com/aWQVeto.png

您可以在右侧看到文本区域超出了其余部分。

我已经尝试过搜索该问题，但似乎找不到其他经历过此问题的人。它显示在每个浏览器中，起初我以为是浏览器问题。

这是模态本身的代码：

#pictureModal {
  width: 31%;
  height: auto;
  text-align: left;
  position: absolute;
  top: calc(50vh - (/* height */100px / 2));
  left: calc(50vw - (/* width */140px / 2));
  padding: 20px;
  background-color: black;
  color: white;
  text-align: center;
}

这是输入代码：

#pictureModalInput{
  width: 100%;
  height: 30px;
  outline: none;
}

我希望文本区域的右侧与X框和“提交”按钮齐平。

Answer 1

尝试一下这个，我也认为它对您有用。您必须在此 #pictureModalInput ID中使用 box-sizing：border-box; 。

#pictureModal {
   width: 31%;
   height: auto;
   text-align: left;
   position: absolute;
   top: calc(50vh - (/* height */100px / 2));
   left: calc(50vw - (/* width */140px / 2));
   padding: 20px;
   background-color: black;
   color: white;
   text-align: center;
}

#pictureModalInput{
  border: none;
  height: 30px;
  outline: none;
  box-sizing: border-box;
  width: 100%;
}

button {
  background: black;
  border: 2px solid #FFF;
  border-radius: 0;
  color: #FFF;
  margin-top: 6px;
  text-align: center;
  width: 100%;
}

<div id="pictureModal">
  <textarea id="pictureModalInput"></textarea>
  <button>Submit</button>
</div>

Answer 2

删除文本框上的填充。我在下面提供了一个示例，该示例与您的代码仅有一些偏差。

文本框填充是一种用户代理样式，这意味着它与元素本身一起提供。您可以在样式表中覆盖这些用户代理样式。可以通过在线阅读然后探索devTools遇到的任何布局问题来了解这些样式，以查看是否有任何用户代理样式可能引起您的错误。

#pictureModal {
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  height: auto;
  left: calc(50vw - (/* width */140px / 2));
  padding: 20px;
  position: absolute;
  top: calc(50vh - (/* height */100px / 2));
  width: 31%;
}

#pictureModalInput{
  border: none;
  height: 30px;
  outline: none;
  padding: 0;
  width: 100%;
}

button {
  background: black;
  border: 2px solid #FFF;
  border-radius: 0;
  color: #FFF;
  margin-top: 6px;
  text-align: center;
  width: 100%;
}

<div id="pictureModal">
  <textarea id="pictureModalInput"></textarea>
  <button>Submit</button>
</div>

Textarea会扩展到填充之外，并且不会冲洗

2 个答案: