Пробел перед левой вкладкой

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

DEMO: http://jsfiddle.net/cuzZC/1/

Answer 2

Дайте класс для первого литий и дать отступы 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% вызывает этот эффект.

Первый литий не нуждается в каких-либо отступов, просто добавьте

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

}

или вы можете удалить padding-left из #bottomTabs li и добавить

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

}

Я бы предложил использовать псевдо-класс первого ребенка, так как это bett er поддерживается. 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/