Question

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

enter image description here

标签的代码是：的 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

为第一个li提供一个类并给出填充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-left删除#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/

左侧标签前的空格

4 个答案: