html - CSS 在纵向模式下的小屏幕上添加自动边距

标签 html css

这是我的代码:

<html>

<head>
  <style>
    body {
      margin: auto;
      width: 720px;
    }
  </style>

</head>

<body>
  <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</body>

</html>

在全高清屏幕上以纵向模式运行时,一切正常:段落宽度为 720 像素。如果我将宽度更改为 1080 像素,也没有问题:没有边距 - 段落从页面的一侧到另一侧。

但如果我尝试在 720x1280 高清屏幕上以纵向模式查看此内容,系统会自动添加 130 像素的边距。

为什么会这样? margin: auto 在较小的屏幕上会搞砸吗?我如何解决它?任何帮助将不胜感激。

最佳答案

 <style>
    body{
    margin: 0 auto;
    width:720px;}
 </style>

这应该有效,检查 jsfiddle .

关于html - CSS 在纵向模式下的小屏幕上添加自动边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45752727/

相关文章:

html - Bootstrap 主体与标题重叠且未居中

jQuery 隐藏/显示

javascript - 如何使下拉菜单在一定时间后消失 JavaScript

Python (Selenium) - 使用 Xpath 时选择器无效

CSS:在 li 元素前加上图像,可能吗?

html - 如何在一行 CSS 中对齐两列

html - 如何调整 svg 的大小?

javascript - Jquery 可排序。在选中/拖动时调整 CSS

HTML/CSS 子子菜单

html - 使用 Bootstrap 的 MVC 元素中不显示自定义图标