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的

35em（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中添加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>

带有容器元素：

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; }使其始终处于中心位置。始终牢记块元素和内联元素的行为。＃欢呼声

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

4 个答案: