Как мне сделать правое поле равным для всех разрешений? - PullRequest
Новая
       13

Как мне сделать правое поле равным для всех разрешений?

0 голосов
/ 14 февраля 2019

У меня короткий неупорядоченный список.Я просто хочу уменьшить правое поле, чтобы границы не содержали всю страницу.

В моем текущем разрешении для правого поля установлено значение 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

Ответы [ 4 ]

0 голосов
/ 14 февраля 2019

Я добавлю родительский контейнер, в котором ваша ol имеет указанную ширину, так что вы можете дать ol относительную ширину (скажем, ... 50%). Затем вы можете использовать { margin: auto; }, чтобы она былав центре всегда.Всегда помните поведение элементов блока и встроенных элементов.# веселит

0 голосов
/ 14 февраля 2019

Вы должны добавить свойство 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>
0 голосов
/ 14 февраля 2019

Вы можете определить 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>
0 голосов
/ 14 февраля 2019

35em со значением по умолчанию font-size (16 пикселей в Chrome) будет примерно 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>
...