Main problem

我设法用W3 schools example制作了一个我想要放入文本的框,但我目前遇到的问题是,当我以较小的尺寸四处移动页面大小时,框的右侧粘在屏幕的末端,这会导致问题,例如,从移动设备查看.我也注意到,左侧的空间比右侧小. 如果您将窗口设置得足够小或 open the site on mobile

到目前为止,我已经try 用百分比或不同的像素大小改变文本框两侧的边距,但无论我做了什么更改,文本框仍然粘在右边.

我遇到问题的代码片段:

<div class="bodybox">
<p>    according to all known laws of aviation there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. the bee of course, flies anyways, because bees dont care what humans think is possible.
<br> Yellow black, yellow black, ooh black and yellow! Let's shake it up a little.
<br>Barry! Breakfast is ready!
<br>Coming! 

</p>

</div>
.bodybox {
    text-align: center;
    background-color: #d19dfc;
    width: 95%;
    border: 5px solid black;
    border-radius: 7px;
    padding: 10px;
    margin-left: 20px;
    margin-right: 10px;
    margin-top: 20px;
          
  }

不要理会这篇令人畏缩的蜜蜂电影 playbook ,因为它是测试盒子边界的第一件事……

推荐答案

body {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1440px;
  min-height: 100vh;
}

.bodybox {
  text-align: center;
  background-color: #d19dfc;
  border: 5px solid black;
  border-radius: 7px;
  max-width: 95%;
  padding: 10px;
  margin-inline: 20px;
  margin-top: 20px;
}
<div class="bodybox">
  <p> according to all known laws of aviation there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. the bee of course, flies anyways, because bees dont care what humans think is possible.
    <br> Yellow black, yellow black, ooh black and yellow! Let's shake it up a little.
    <br>Barry! Breakfast is ready!
    <br>Coming!

  </p>

</div>

Html相关问答推荐

将文本区域标签的内容着色为SON(带有 colored颜色 )

HTML5章节或文章

选中/取消选中带有_hyperscript的多个复选框

获得一个css框,以便在页面太小时不再粘在页面的角落.

更改Angular 为17的material Select 字段的高度?

使用`<;use>;`与`<;img>;`时呈现的SVG大小不同

IFRAME中的Chrome图像未调整大小

为什么根捕获上的`min-height`溢出,而`height`没有?

30000ms后超时重试:期望找到元素:someElement,但从未找到它

:invalid Select 器的惰性判断

如何使用 HTML 将对象数组发送到 Nodejs Express

MUI 日期 Select 器要包含的日期

模拟另一个输入值设置表单输入的数值

视频添加到 Html 与 Github 不同步

HTML 如何根据屏幕尺寸调整/裁剪视频背景?

项目的水平列表:倒数第二个项目居中,而最后一个项目占据所有剩余空间

每次按下按钮时减小字体大小的 jquery 函数

html tailwindcss 给 li 标签添加边框

我正在try 向我预先存在的导航栏添加响应式汉堡包导航,但由于某种原因它没有显示

使用 CSS 的发光边框动画没有流畅的过渡