Css/Html 删除左侧边框和我的无序列表之间的空间

Question

嘿，我需要帮助来删除左侧边框和无序列表之间的空格。列表中的文本也已被编辑，因此我尝试删除连接到列表的标签并且它有效，但我还希望对文本进行样式设置。

这是我的 CSS 列表：

#list {
text-indent: 150px;
list-style-position: inside; 
font-size: 35px; 
font-weight: bold;
line-height: 50px;
}
ul {
display: inline-block;
border: 5px solid red;
padding: 1px;
-webkit-padding-start: 0px;
     -moz-padding-start: 0px;
          padding-start: 0px;
}

这是我的html：

<h1 id="headline">5 Must Climb Mountains</h1>
<ul id="list">
<li>Kilimanjaro</li>
<li>Table Mountain</li>
<li>Matterhorn</li>
<li>Denali</li>
<li>Cerro Torre</li>
</ul>

Answer 1

您的#list 上有text-indent: 150px

请参阅此JSFiddle，它通过删除它来修复它。 Text indent 将应用于元素的任何文本内容，包括一些标签，例如 <li>。