1

ここで問題が発生しました。これは、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;
}
4

4 に答える 4

3

あなたはpadding-left: 1.5%両方のli要素を持っています。必要なのは 2 つ目だけです。2 番目のリスト項目のためだけに新しいクラス/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/

于 2013-11-11T12:10:55.697 に答える
0

これを試して、

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

http://jsfiddle.net/K9jq7/

于 2013-11-11T12:25:30.830 に答える
0

padding-left: 1.5%がこの影響を引き起こしています。

最初の li はパディングを必要とせず、追加するだけです

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

}

padding-leftまたは、 fromを削除し#bottomTabs liて追加することもできます

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

}

より適切にサポートされているため、最初の子の疑似クラスを使用することをお勧めします。 http://www.quirksmode.org/css/selectors/

于 2013-11-11T12:25:04.787 に答える
0

最初の 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>
于 2013-11-11T12:14:17.977 に答える