html - 我在第三排按钮前面有额外的空间

标签 html css button whitespace space

我需要获得与屏幕中第二行按钮相同的另一行按钮(第三行)。所以我复制粘贴了第二行按钮的代码。但是我在第三行按钮前面得到了额外的空间。需要删除那个额外的空间(在我附上的输出图片中提到了带有蓝色箭头的额外空间)。请帮忙。谢谢

my output

 <!--start: Content -->
<div id="content" class="span10">

<!--breadcrum-->
    <ul class="breadcrumb">
        <li>
            <i class="icon-home"></i>
            <a href="<?php echo base_url('dashoard')?>">Home</a> 
            <i class="icon-angle-right"></i>
        </li>
        <li><a href="#">Dashboard</a></li>
    </ul>

<!--read reports-->
    <div class="row-fluid">

        <div class="span3 statbox yellow" onTablet="span6" onDesktop="span3" style="height:150px;">
            <div class="boxchart">5,6,7,2,0,4,2,4,8,2,3,3,2</div>
            <div class="number"><i class="icon-arrow-up"></i></div>
            <div class="title">Orders</div>
            <div class="footer">
                <a href="<?php echo base_url('manage/order');?>">Read Full Report</a>
            </div>  
        </div>

        <div class="span3 statbox green" onTablet="span6" onDesktop="span3" style="height:150px;">
            <div class="boxchart">5,6,7,2,0,-4,-2,4,8,2,3,3,2</div>
            <div class="number"><i class="icon-arrow-up"></i></div>
            <div class="title">Income</div>
            <div class="footer">
                <a href="<?php echo base_url('manage/order');?>">Read Full Report</a>
            </div>
        </div>

        <div class="span3 statbox blue" onTablet="span6" onDesktop="span3" style="height:150px;">
            <div class="boxchart">5,6,7,2,0,4,2,4,8,2,3,3,2</div>
            <div class="number"><i class="icon-arrow-up"></i></div>
            <div class="title">Status</div>
            <div class="footer">
                <a href="<?php echo site_url('Job/view_jobs');?>">Read Full Report</a>
            </div>
        </div>

        <div class="span3 statbox red" onTablet="span6" onDesktop="span3" style="height:150px;">
            <div class="boxchart">7,2,2,2,1,-4,-2,4,8,,0,3,3,5</div>
            <div class="number"><i class="icon-arrow-up"></i></div>
            <div class="title">Products</div>
            <div class="footer">
                <a href="<?php echo base_url('manage/product')?>">Read Full Report</a>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>

<!--buttons-->
    <div class="row-fluid hideInIE8 circleStats">

        <div class="span2" onTablet="span4" onDesktop="span2">
            <a href="<?php echo base_url('manage/product')?>">
            <div class="circleStatsItemBox blueDark">
                <div class="header">Manage Product</div>
                    <i class="icon-barcode" style="font-size:110px;"></i>    
                <div class="footer"></div> 
            </div>
        </div>

        <div class="span2" onTablet="span4" onDesktop="span2">
            <a href="<?php echo base_url('manage/order');?>">
            <div class="circleStatsItemBox red">
                <div class="header">Manage Order</div>
                    <i class="icon-shopping-cart" style="font-size:110px;"></i>    
                <div class="footer"></div> 
            </div>
        </div>

        <div class="span2" onTablet="span4" onDesktop="span2">
            <a href="#">
            <div class="circleStatsItemBox pink">
                <div class="header">Customer Feedback</div><br>
                    <i class="icon-group" style="font-size:80px;"></i>  
                    <i class="icon-comments-alt" style="font-size:80px;"></i>
                <div class="footer"></div> 
            </div>
        </div>

        <div class="span2" onTablet="span4" onDesktop="span2">
            <a href="<?php echo base_url('manage/category')?>">
            <div class="circleStatsItemBox greenLight">
                <div class="header">Manage Category</div><br>
                    <i class="icon-qrcode" style="font-size:100px;"></i>    
                <div class="footer"></div> 
            </div>
        </div>

        <div class="span2" onTablet="span4" onDesktop="span2">
            <a href="<?php echo site_url('Job');?>">
            <div class="circleStatsItemBox purple">
                <div class="header">Assign Delivery</div>
                    <i class="icon-truck" style="font-size:110px;"></i> 
                <div class="footer"></div> 
            </div>
        </div>

        <div class="span2" onTablet="span4" onDesktop="span2">
            <a href="<?php echo base_url('theme/option');?>">
            <div class="circleStatsItemBox greenDark">
                <div class="header">Manage Theme</div>
                    <i class="icon-cogs" style="font-size:110px;"></i>    
                <div class="footer"></div> 
            </div>
        </div>

        <div class="clearfix"></div>
    </div>

    <!--third row-->
    <div class="row-fluid hideInIE8 circleStats">

        <div class="span2" onTablet="span4" onDesktop="span2">
            <a href="<?php echo base_url('manage/product')?>">
            <div class="circleStatsItemBox blueDark">
                <div class="header">Manage Product</div>
                    <i class="icon-barcode" style="font-size:110px;"></i>    
                <div class="footer"></div> 
            </div>
        </div>

        <div class="span2" onTablet="span4" onDesktop="span2">
            <a href="<?php echo base_url('manage/order');?>">
            <div class="circleStatsItemBox red">
                <div class="header">Manage Order</div>
                    <i class="icon-shopping-cart" style="font-size:110px;"></i>    
                <div class="footer"></div> 
            </div>
        </div>

        <div class="span2" onTablet="span4" onDesktop="span2">
            <a href="#">
            <div class="circleStatsItemBox pink">
                <div class="header">Customer Feedback</div><br>
                    <i class="icon-group" style="font-size:80px;"></i>  
                    <i class="icon-comments-alt" style="font-size:80px;"></i>
                <div class="footer"></div> 
            </div>
        </div>

        <div class="span2" onTablet="span4" onDesktop="span2">
            <a href="<?php echo base_url('manage/category')?>">
            <div class="circleStatsItemBox greenLight">
                <div class="header">Manage Category</div><br>
                    <i class="icon-qrcode" style="font-size:100px;"></i>    
                <div class="footer"></div> 
            </div>
        </div>

        <div class="span2" onTablet="span4" onDesktop="span2">
            <a href="<?php echo site_url('Job');?>">
            <div class="circleStatsItemBox purple">
                <div class="header">Assign Delivery</div>
                    <i class="icon-truck" style="font-size:110px;"></i> 
                <div class="footer"></div> 
            </div>
        </div>

        <div class="span2" onTablet="span4" onDesktop="span2">
            <a href="<?php echo base_url('theme/option');?>">
            <div class="circleStatsItemBox greenDark">
                <div class="header">Manage Theme</div>
                    <i class="icon-cogs" style="font-size:110px;"></i>    
                <div class="footer"></div> 
            </div>
        </div>

        <div class="clearfix"></div>
    </div>

</div><!--/.fluid-container-->
<!-- end: Content-->

最佳答案

按钮行似乎包裹在 <div class="row-fluid hideInIE8 circleStats"> 中这可能会导致该行的边距略大。

关于html - 我在第三排按钮前面有额外的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58668581/

相关文章:

html - 使我的标题 "fixed"调整标题框的大小

IE9 中的 jQuery 悬停错误

Html5 视频轨道数据uri

html - 如何将 2 个侧边栏放到一页上?

javascript - jQuery 图像绝对源路径

android - 如果用户将手指移开按钮,则取消按钮按下

html - href 目标 div 容器同页

jquery如何通过onclick获取每一个li的值

javascript - 使用 AJAX 加载另一个工作按钮

python - 如何确定按钮何时在 Tkinter 中发布?