如何在所有分辨率上使我的右侧边距相等？

Question

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

在我目前的决议中，我有正确的边距设置为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

Answer 1

具有默认font-size（Chrome中为16px）的35em至少约为35 x 12 = 560px - 使用像素代替。同时将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>

Answer 2

您必须向ol添加inline-block属性，因此宽度和边距将占用其内容的空间。这样，它在所有分辨率上都是相同的。

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>

Answer 3

您可以为width元素定义ol。

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

没有容器的示例：

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>

WITH容器元素：

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>

Answer 4

我会补充你的ol具有指定宽度的父容器，这样你就可以给ol一个相对宽度（比如...... 50％）然后你可以使用{ margin: auto; }使它始终位于中心。始终考虑块元素和内联元素的行为。 ＃干杯