Точки в неупорядоченном списке перемещаются влево на мобильный - PullRequest
Новая
       12

Точки в неупорядоченном списке перемещаются влево на мобильный

0 голосов
/ 03 ноября 2018

Я пытаюсь пройти через основы веб-разработки на MDN, и по какой-то причине маркеры в моем неупорядоченном списке перемещаются полностью влево от тела. Я попытался добавить заполнение 0 в неупорядоченные списки, но это не помогло.

Вот оно на рабочем столе: https://imgur.com/a/mYFEmx4

Вот это на мобильном телефоне: https://imgur.com/a/Qx6DC8n

Html: 

<ul>
    <li>Movies</li>
    <li>Television</li>
    <li>Music</li>
    <li>Books</li>
</ul>

CSS: 

body {
    font-family: 'Shadows Into Light', cursive;
    text-align: center;
    text-transform: uppercase;
    background-color: gainsboro; /* silver/gainsboro/lightgray ? */
    width: 800px;
    margin: 0 auto;
    padding: 0 20px 20px 20px;
    border: 5px groove black;
}

h1 {
    font-size: 60px;
    color: #5A4568; /* dark purple from google */
    margin: 0;
    padding: 20px 0;
    text-shadow: 0 0 10px black;
}

h2 {
    color: darkred;
    text-shadow: 0 0 15px black;
}

p, ul {
    line-height: 2;
    letter-spacing: 1px;
    color: #B70404; /* dark red from google */
}

a {
    line-height: 2;
    letter-spacing: 1px;
    color: #5A4568;
}

.coming-soon-subscript {
    font-size: 10px;
    color: #2D7F32;
    font-weight: normal; /* these elements will be appearing in headers, which are automatically bolded.  this is to remove the bold-ness. */
}

.clearfix {
    clear: both;
}

hr {
    margin: 0 -20px 20px -20px;
}

button {
    text-transform: none;
}

ul {
    padding: 0;
}

1 Ответ

0 голосов
/ 03 ноября 2018

Вы можете установить display: inline-block в ul в css - но это только приблизит маркеры к списку со всеми маркерами, выровненными влево, пока текст центрирован. https://codepen.io/anon/pen/xQxVNJ

Обходной путь для этого - удалить маркеры по умолчанию ul, используя list-style: none в css, и использовать Unicode &#9679 в HTML в качестве маркеров. Как в этой скрипке http://jsfiddle.net/tm794sq2/1/

...