如何使所有分辨率的右侧边距相等？答案

【问题标题】：How do I make my right-side margin equal on all resolutions?如何使所有分辨率的右侧边距相等？
【发布时间】：2019-02-16 16:21:57
【问题描述】：

我有一个简短的无序列表。我基本上只是想缩小右边距，使边框不包含整个页面。

在我当前的分辨率下，我将右边距设置为 35em。这在我的窗口最小化时有效，但是当我返回全屏 (1920x1080) 时，右边距太大，几乎到达网页的另一侧。

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
  border: 1px solid rgba(0, 0, 0, 1);
  margin-right: 35em;
  padding-left: .5em;
}

<ol>
  <li>eggs</li>
  <li>milk</li>
  <li>cheese</li>
  <li>bacon</li>
  <li>juice</li>
  <li>bagels</li>
</ol>

低分辨率（我希望它始终看起来像）：http://prntscr.com/ml567o

以及高分辨率（问题）：http://prntscr.com/ml56ip

【问题讨论】：

你试过margin: 0 auto吗？
显示：内联块；

标签： html css list alignment display

【解决方案1】：

35em 默认为font-size（Chrome 中为 16 像素）至少约为 35 x 12 = 560 像素 - 请改用像素。还将display 更改为inline-block，使ol 的宽度仅与内容一样多。

请看下面的演示：

ol {
    list-style-type: upper-roman;
    list-style-position: inside;
    border: 1px solid rgba(0,0,0,1);
    padding-right: 35px; /* CHANGED */
    padding-left: .5em;
    display: inline-block; /* ADDED */
}

<ol>
    <li>eggs</li>
    <li>milk</li>
    <li>cheese</li>
    <li>bacon</li>
    <li>juice</li>
    <li>bagels</li>
</ol>

【讨论】：

将列表显示更改为内联块完全消除了我对边距的需求。我只是在左右两边加了一点填充来调整。非常感谢;效果很好。

【解决方案2】：

您必须将 inline-block 属性添加到 ol 以便宽度和边距将占据其内容的空间。这样它在所有分辨率上都是相等的。

ol {
    list-style-type: upper-roman;
    list-style-position: inside;
    border: 1px solid rgba(0, 0, 0, 1);
    padding: 0 .5em;
    display: inline-block; /* This is they key. The width, and therefore the margin will be based on its content */
}

<ol>
    <li>eggs</li>
    <li>milk</li>
    <li>cheese</li>
    <li>bacon</li>
    <li>juice</li>
    <li>bagels</li>
</ol>

【讨论】：

【解决方案3】：

您可以为ol 元素定义width。

但是要让彩色背景在您的图像中的边框之外，您需要一个容器元素...

无容器示例：

body {
margin: 0;
background: #ffd;
}
ol {
    list-style-type: upper-roman;
    list-style-position: inside;
    border: 1px solid rgba(0,0,0,1);
    margin-right: 5em;
    padding-left: .5em;
    background: lightblue;
    width: 150px;
}

<ol>
    <li>eggs</li>
    <li>milk</li>
    <li>cheese</li>
    <li>bacon</li>
    <li>juice</li>
    <li>bagels</li>
</ol>

带有容器元素：

body {
  margin: 0;
  background: #ffd;
}

.container {
display: inline-block;
  background: lightblue;
  padding: 20px;
}

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
  border: 1px solid rgba(0, 0, 0, 1);
  margin-right: 5em;
  padding-left: .5em;
  background: lightblue;
  width: 150px;
}

<div class="container">
  <ol>
    <li>eggs</li>
    <li>milk</li>
    <li>cheese</li>
    <li>bacon</li>
    <li>juice</li>
    <li>bagels</li>
  </ol>
</div>

【讨论】：

【解决方案4】：

我将假设您的ol 具有指定宽度的父容器，以便您可以给ol 一个相对宽度（例如... 50%）然后您可以使用{ margin: auto; } 使其始终位于中心。始终牢记块元素和内联元素的行为。 #干杯

【讨论】：