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

Question

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

在我当前的分辨率中，我将右边距设置为 35em。这在我的 window 最小化时有效，但当我返回全屏 (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

35em，默认 font-size（Chrome 中的 16px）至少约为 35 x 12 = 560px - 请改用 pixels。还要将 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 添加内联块属性，这样宽度和边距将占其内容的 space。这样它在所有分辨率上都是平等的。

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

您可以为 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>

Answer 4

我将确保您的 ol 具有指定宽度的父容器，以便您可以给 ol 一个相对宽度（比如... 50%）然后你可以使用 { margin: auto; } 让它总是在中心。始终牢记块元素和内联元素的行为。 #干杯

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

How do I make my right-side margin equal on all resolutions?

html

css

list

alignment

display