html - ul 前面有空格

Question

我有一个无序列表并内联显示，但问题是列表前面出现一些空白，如下图所示:

这是CSS:

#ul-right{
  float:right;        
}

.li-right{
  display:inline;
  font-size:initial;
}

.ul-leftright{
  font-size: 0px;    
}

这是 html :

<ul id="ul-right" class="ul-leftright">
  <li class="li-right">
    <a runat="server" href="Login.aspx">Login</a>
  </li>
  <li class="li-right">
    <a runat="server" href="LogOut.aspx">Logout</a>
  </li>
  <li class="li-right">
    <a runat="server" href="Register.aspx">Register</a>
  </li>
  <li class="li-right">
    <a runat="server" href="~/Cart/MyCart.aspx">MyCart</a>
  </li>
</ul>

你能告诉我为什么会发生这种情况吗？你能帮我删除空白吗？

Answer 1

这是 ul 元素上的默认填充。大多数浏览器都会添加 ~ 40px 的 padding-left 值。

Example Here

ul {
    padding: 0;
}