文章/答案/技术大牛

发布

社区首页 >问答首页 >显示不必要空格的页面

问显示不必要空格的页面
EN

Stack Overflow用户

提问于 2014-07-17 13:19:50

回答 1查看 78关注 0票数 0

我在一个CSS标签设计页面上工作，它看起来是这样的：

这是它的代码(test2.php)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="css/ajaxtabs.css" />

<script type="text/javascript" src="js/ajaxtabs.js">

</script>

</head>

<body>
<?php
$page = isset($_GET['test2']) ? $_GET['test2'] : "" ;
?>

<ul id="countrytabs" class="shadetabs" style="clear:both">
<!--<li><a href="#" rel="#default" class="selected">Tab 1</a></li>-->
<li><a href="admin/add-client.php" rel="countrycontainer">Client</a></li>
<li><a href="admin/add-vendor.php" rel="countrycontainer">Vendor</a></li>
<!--<li><a href="admin/add-client.php" rel="#iframe">Tab 4</a></li>-->
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:100%; height:100%; margin-bottom: 1em; padding: 10px; clear:both;">
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

<hr />

</body>
</html>

但是，一旦我将此代码放入<div>中的另一个调用它的代码中，它就会显示不必要的空间。

下面是我的代码(index.php)：

<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ISYS</title>
<link href="../css/main-style.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery.tools.min.js"></script>
<script src="../js/addfunction.js"></script>
<script src="../js/editfunction.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery.dataTables.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
    var width = 700;
    var height = 600;
    var left = parseInt((screen.availWidth/2) - (width/2));
    var top = parseInt((screen.availHeight/2) - (height/2));
    var windowFeatures = "width=" + width + ",height=" + height +   
        ",status,resizable,left=" + left + ",top=" + top + 
        "screenX=" + left + ",screenY=" + top + ",scrollbars=yes";
</script>
<script>
(function(document) {
    'use strict';

    var LightTableFilter = (function(Arr) {

        var _input;

        function _onInputEvent(e) {
            _input = e.target;
            var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
            Arr.forEach.call(tables, function(table) {
                Arr.forEach.call(table.tBodies, function(tbody) {
                    Arr.forEach.call(tbody.rows, _filter);
                });
            });
        }

        function _filter(row) {
            var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
            row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
        }

        return {
            init: function() {
                var inputs = document.getElementsByClassName('light-table-filter');
                Arr.forEach.call(inputs, function(input) {
                    input.oninput = _onInputEvent;
                });
            }
        };
    })(Array.prototype);

    document.addEventListener('readystatechange', function() {
        if (document.readyState === 'complete') {
            LightTableFilter.init();
        }
    });

})(document);
</script>
</head>

<body>
<?php
require("../dbconnect.php");
$page = isset($_GET['page']) ? $_GET['page'] : "test2" ;
?>
<div class="container">
  <div class="header"><img src="../images/CTILOGO.jpg" width="20%" height="90" style="background-color: #8090AB; display:inline;" />
  <a href="../logout.php"><img src="../images/logout.png" class="headermenu" style=" display:inline;" /></a>
  <a href="#home"><img src="../images/home.png" class="headermenu" style=" display:inline;" /></a>
  <a href="javascript:changePassword()" title="Change Password"><img src="../images/user.png" class="headermenu" style=" display:inline;" /></a>
    <!-- end .header --></div>
  <div class="sidebar1" id="link_ul">
    <ul class="nav">
      <li><a href="index.php?page=client">Client</a></li>
      <li><a href="index.php?page=vendor">Vendor</a></li>
      <li><a href="index.php?page=product">Product</a></li>
      <li><a href="index.php?page=user">Users</a></li>
      <li><a href="index.php?page=test2">test</a></li>
    </ul>
    <script>
                /*for active link*/
                    (function(){
                        $('#link_ul a').bind('click', function(e){
                            var me=$(this);
                            var as = $('#link').find('a');

                            as.removeClass('current');
                            me.addClass('current');
                        });

                    }());
    </script>
    <!-- end .sidebar1 --></div>
  <div class="content">
    <?php
        include(''.$page.'.php');
    ?>
    <!-- end .content --></div>
  <div class="footer">
    <p></p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>

我希望index.php看起来像test2.php中的选项卡。我没有更改CSS部分中的任何内容，除了显示之外，一切都运行正常。我不确定代码中哪里出了问题。如果有任何帮助，我将不胜感激。

php

jquery

html

css

回答 1

Stack Overflow用户

发布于 2014-08-18 07:33:16

重置CSS。也许浏览器添加了一些不需要的填充或边距。将此代码放在css的顶部

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24795420

复制

相似问题

问显示不必要空格的页面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示不必要空格的页面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问显示不必要空格的页面
EN