Question

我正在开发一个CSS标签设计页面，它的外观如下：

enter image description here

这是代码（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>内，它就会显示不必要的空间。

enter image description here

这是我的代码（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部分中的任何内容，除了它的显示外，一切正常。我不确定代码在哪里错了。我会感激任何帮助。

Answer 1

重置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;
}

显示不必要空间的页面

1 个答案: