css - 左侧制表符前的空格

Question

我在这里遇到了一个问题。这就是我用 html 和 css 设计的应用程序。问题在左下角用红色圆圈表示，即左标签前的空格。我无法删除此空间。这既不是填充也不是边距，但我不知道它是什么。

标签的代码是： html

<ul id="bottomTabs">
    <li><a href="player_screen.html" class="left_tab">Player</a></li>
    <li><a href="#">Reciters</a></li>
</ul>

css

ul {
    margin: 0 ;
    bottom: 0 ;
    left: 0 ;
    padding: 0;
}

li {
    list-style-type: none;
    bottom: 0 ;
    left: 0 ;
    margin-left:1em ;
}

#bottomTabs {
    width: 100%;
    bottom: 0px;
    display: table;
    position: fixed;
    table-layout: fixed;
    text-align: center;
}

#bottomTabs li {
    width: 47.5%;
    height: auto; 
    align : center;
    display: table-cell;
    padding-left: 1.5%;
    vertical-align: bottom;
}

#bottomTabs a {
    display: block;
    color: #ffffff;
    min-height: 100%;
    padding: 4px 10px;
    background-color: #222;
    border-radius: 0 0 0 0;
}

Answer 1

你有你padding-left: 1.5%的两个li元素。你只需要第二个。您可以仅为第二个列表项创建一个新的类/ID。将您的 HTML 设置为：

<ul id="bottomTabs">
    <li><a href="player_screen.html" class="left_tab">Player</a></li>
    <li id="padded"><a href="#">Reciters</a></li>
</ul>

和 CSS：

#bottomTabs li {
    width: 47.5%;
    height: auto; 
    align : center;
    display: table-cell;   
    vertical-align: bottom;
}

#padded{
 padding-left: 1.5%;   
}

演示：http: //jsfiddle.net/cuzZC/1/

Answer 2

给第一个 li 上课，给 padding 0..

.padd
{
padding:0 !important;
}

<ul id="bottomTabs">
    <li class="padd" ><a href="player_screen.html" class="left_tab">Player</a></li>
    <li><a href="#">Reciters</a></li>
</ul>

Answer 3

padding-left: 1.5%正在造成这种影响。

第一个 li 不需要任何填充，只需添加

#bottomTabs li:first-child {
padding-left: 0;

}

或者您可以删除padding-leftfrom#bottomTabs li并添加

#bottomTabs li:last-child {
padding-left: 1.5%;

}

我建议使用 first-child 伪类，因为它得到更好的支持。 http://www.quirksmode.org/css/selectors/

Answer 4

试试这个，

#bottomTabs li:first-child {
    width: 47.5%;
    height: auto; 
    align : center;
    display: table-cell;
    padding-left: 0;
    vertical-align: bottom;
}

http://jsfiddle.net/K9jq7/