【问题标题】:I'm getting extra space in front of the third row of buttons我在第三排按钮前面获得了额外的空间
【发布时间】:2019-11-02 05:47:17
【问题描述】:

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

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-->

【问题讨论】:

    标签: html css button whitespace space


    【解决方案1】:

    按钮行似乎包含在 &lt;div class="row-fluid hideInIE8 circleStats"&gt; 中,这可能导致该行的边距稍大。

    【讨论】:

      猜你喜欢
      • 2015-01-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-12-13
      • 1970-01-01
      • 2019-12-17
      • 2020-08-12
      相关资源
      最近更新 更多