html - 如何让一个 div 作为一个盒子不跨越/跨越屏幕

Question

我有以下代码块用于 div 上的样式应该是一个盒子:

.newsBox{
  width: 100%;
  text-align: center;
  border-style: solid;
  border-width: medium;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 25px;
}

我在 PWA 中使用此代码，因此它将在移动屏幕上使用。

我的 div 不仅跨越了手机的整个屏幕，还跨越了屏幕(因此我必须左右移动屏幕才能查看整个框)，但我不明白为什么什么时候我的宽度设置为 100%。我已经尝试了在 stack overflow 和其他网站上可以找到的所有内容；我认为可能只是我的代码有问题。

感谢任何帮助。谢谢

Answer 1

将宽度设置为 100% 并添加额外的填充后，它会显示烦人的滚动条。尝试将 box-sizing: border-box; 属性添加到您的 div，它将被修复。