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。大多数浏览器都会添加padding-left~ 值40px。

示例在这里

ul {
    padding: 0;
}