Question

我正在尝试了解MDN上的Web开发基础知识，由于某种原因，无序列表中的要点一直移到正文的左侧。我尝试向无序列表中添加填充0，但这无济于事。

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;
}

Answer 1

首先，将 display: inline-block 设置为 <ul>，然后将 text-align: left 设置为 <li>

Answer 2

您可以在CSS中将display: inline-block设置为ul-但是，这只会使项目符号更靠近列表，并且在文本居中时所有项目符号保持对齐。 https://codepen.io/anon/pen/xQxVNJ

一种解决方法是在CSS中使用ul删除list-style: none的默认项目符号，并在HTML中使用unicode &#9679作为项目符号。就像这个小提琴http://jsfiddle.net/tm794sq2/1/

无序列表中的项目符号点一直移动到手机的左侧

2 个答案: