Question

我是一个新的HTML5编码器。请参阅下面的sceenshot显示我的问题 enter image description here
你可以看到这幅画中圆圈内的蓝色。

<html>
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=no">
        <title>Tab Animation</title>
        <link rel="stylesheet" href="index.css"/>
        <script src="jquery-1.11.0.min.js"></script>
        <script src="index.js"></script>
    </head>
    <body>
        <div style="width:100%; height:100%;">
            <div style="width:100%; height:93%; background-color:gray">
                <!--
                <div style="width:100%; height:100%; background-color:orange"> </div>
                <div style="width:100%; height:100%; background-color:blueviolet"> </div>
                <div style="width:100%; height:100%; background-color:yellow"> </div>
                -->
            </div>
            <div style="width:100%; height:7%; background-color:slateblue">

                <div class="tabButton">
                    <div><p>Tab 1</p></div>
                </div>

                <div class="tabButton">
                    <div><p>Tab 2</p></div>
                </div>

                <div class="tabButton">
                    <div><p>Tab 3</p></div>
                </div>

            </div>
        </div>
    </body>
</html>

CSS文件

body{
    margin: 0;
    padding: 0;
    height: 100%;
}
body .tabButton {
    width:33.33%; 
    height:100%; 
    background-color:pink; 
    float: left;
    display:table;
}
body .tabButton div {
    display:table-cell;
    vertical-align: middle;
}
body .tabButton div p {
    text-align:center;
    width:100%;
}

如何解决这个问题？确保清洁标签大小。

Answer 1

您实际上已经指定自己内容不以使用100％的可用内容：

body .tabButton {
    width:33.33%;

3 * 33.33％是99.99％，不 100％。尝试将其更改为33.34％，您将看到差距消失。请参阅此jsfiddle以自行试用...

标签按钮空间问题

1 个答案: