我对css有一个问题,但我不能解决它。我有20个结果应该显示在我的网站上,但它只显示其中的14个..如果我选择检查器,我可以在源代码中看到它们的其他结果。 我可以向上或向下移动菜单的位置,我可以看到其他元素是隐藏的,但只有向下或向上移动我可以看到它们,而我却无法增加显示的空间大小行。
这是我的html-php代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Offers | <?php echo SITE_NAME; ?> example</title>
<link type="text/css" rel="stylesheet" href="css/jQueryCustom.css">
<link type="text/css" rel="stylesheet" href="css/commons.css">
<link type="text/css" rel="stylesheet" href="css/helpers.css">
<style type="text/css">
.biggerfont { font-size: 14px;
}
</style>
</head><body class="tgz" >
<?php include('includes/header.php'); ?>
<?php include('includes/sub_menu.php'); ?>
<div id="app_content">
<div class="container">
<style>
#ajaxLoadingModalBox{
display:none;
}
#ajaxLoadingModalBox_container{
background-color: inherit;
position: fixed;
z-index: 2000;
background-color: inherit;
padding: 0px;
width: 72px;
height: 72px;
left: 46%;
top: 46%;
}
.rf-pp-shade {
background-color: #D0D0D0;
height: 100%;
left: 0;
opacity: 0.5;
position: fixed;
top: 0;
width: 100%;
}
#project_selector [isDisabled = 'true']{
color : grey;
}
</style>
<div id="error_messages"></div>
<div class="page-content"> <div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="script-tabs">
<div id="projects_container" class="clearfix">
<div class="clearfix" style="display: table;">
<div id="menu_left" style="display: table-cell; vertical-align: top;">
<div id="project_creator"> <a id="create-new-item" href="create_offer.html">Create new Offer</a></div>
<div id="project_selector">
<form action="offers.html" method="get">
<input placeholder="Search" id="projects_list_search" type="text" name="search" value="<?=$search;?>"/>
</form>
<div id="projects_list">
<div style="height: 354px;" class="scrollbar disable">
<div style="height: 354px;" class="track">
<div style="top: 0px; height: 354px;" class="thumb">
<div class="end"></div>
</div>
</div>
</div>
<div style="width: 100%;" class="viewport">
<div style="top: -1px;" class="overview">
<ul>
<li class="projects-list-item selected" isdisabled="false" data-id="0f53ee7c-f894-42dd-b2f7-ddf576a04db1"> <span class="left">My Offers</span> <span class="right"> </span></li>
<?php if ($frow = mysql_fetch_array($result)) {
do {
$rows = 0;
?>
<a href="view_offer.html?id=<?=$frow["softwares_id"];?>"> <li class="projects-list-item"> <span class="left"> <?=ucwords($frow["software_name"]);?></span></li></a>
<?php
$rows++;
} while (($frow = mysql_fetch_array($result)) && ($rows < $recordsPerPage));
}
if($noRecords==0){
?>
<li class="projects-list-item" isdisabled="true" data-id="0f53ee7c-f894-42dd-b2f7-ddf576a04db1"> <span class="left">No records found.</span> <span class="right"> </span></li>
<?php }?>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="project_details" style="display: table-cell; vertical-align: top;">
<h1><strong>Create Your Offer </strong></h1>
<p><br>
</p>
<p>Advertising through <?php echo SITE_NAME; ?> is ideal for software companies and developers looking to promote many types of apps including: <br>
Tool bars, Search engines,Browsers, Browser extensions, Desktop widgets, AV software, Coupon and shopping alert <br>
systems and many others.</p>
<p><br>
</p>
<table width="767" border="0" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td width="115"><img src="img/SDK_BOX_16.jpg"></td>
<td width="617"><ul>
<li>Reach millions of new users from the far corners of the Internet who choose to install your app</li>
<li></li>
</ul></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="5" cellspacing="5" width="767">
<tbody>
<tr>
<td width="114"><img src="img/SDK_BOX_15.jpg"></td>
<td width="618"><ul>
<li>Cost-effective software pay per install distribution, Reach the largest possible audience</li>
<li></li>
</ul></td>
</tr>
</tbody>
</table>
<table width="767" border="0" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td width="114"><img src="img/SDK_BOX_13.jpg"></td>
<td width="618"><ul>
<li>Built-in A/B testing and analytics to track and optimize performance.</li>
</ul></td>
</tr>
</tbody>
</table>
<table width="767" border="0" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td width="114"><img src="img/SDK_BOX_14.jpg"></td>
<td width="618"><p><br>
</p>
<ul>
<li>Strongest anti fraud system to ensure you are only paying for installations by real users</li>
</ul></td>
</tr>
</tbody>
</table>
<h1> </h1>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</div> </div>
</div>
<div style="display: none;" id="ajaxLoadingModalBox">
<div style="z-index:2000;" id="ajaxLoadingModalBox_shade" class="rf-pp-shade">
<button id="ajaxLoadingModalBoxFirstHref" class="rf-pp-btn" tabindex="-1"> </button>
</div>
<div id="ajaxLoadingModalBox_container" class="rf-pp-cntr ">
<div id="ajaxLoadingModalBox_shadow" class="rf-pp-shdw" style="opacity: 0.1; width: 72px; left: 5px; top: 5px; bottom: -5px;"></div>
<div id="ajaxLoadingModalBox_content_scroller" class="rf-pp-cnt-scrlr" style="width: 72px; height: 72px;">
<div style="background-color: inherit;padding:0px;" id="ajaxLoadingModalBox_content" class="rf-pp-cnt">
<div style="padding:20px"> <img style="width:32px; height:32px;" src="img/page-spinner.gif"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
这是一些css代码:
/* --------------------------- common.css ------------------------------------- */
@font-face {
font-family: 'Open Sans';
src: url('../fonts/opensans-bold-webfont.woff') format('woff');
font-weight: bolder;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../fonts/opensans-semibold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../fonts/opensans-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Open Sans';
src: url('../fonts/opensans-light-webfont.woff') format('woff');
font-weight: lighter;
font-style: normal;
}
@media print {
body * {
visibility: hidden;
}
.printable,
.printable * {
visibility: visible;
}
.printable {
position: absolute;
left: 0;
top: 0;
}
}
html, body, iframe,
h1, h2, h3, h4, h5, h6, p, a, dl, dt, dd, ol, ul, li,
fieldset, label, img, input,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
border-spacing: 0;
font-size: 14px;
}
/* firefox line-height fix */
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
body {
background-color: #474141;
color: #469965;
height: 100%;
margin: 0;
overflow-x: hidden;
font-family: 'Open Sans', Arial, Tahoma, sans-serif;
font-size: 15px;
line-height: 1.4;
overflow-x: hidden;
box-sizing: border-box;
}
.header-green-line {
height: 5px;
background: #609e79;
}
h1 {
font-size: 22px; font-family: 'Open Sans', Arial, Tahoma, sans-serif;
line-height: 1;
color: #003333
}
h2 {
font-size: 18px;
font-weight: normal;
}
a,
input {
outline: medium none;
}
label {
display: inline;
}
a {
cursor: pointer;
text-decoration: none !important;
font-size: 14px;
}
a,
a:visited {
color: #FFFFFF;
}
a:hover {
color: #95c8aa ;
}
ol, ul {
list-style: none;
}
.list-inline > li {
display: inline-block;
line-height: normal;
}
.container {
margin: 0 auto;
width: 1240px;
}
.container:after {
clear: both;
content: " ";
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
#project_tab,
#app_console_tab,
#plugin_tab {
padding: 40px;
padding-right: 35px !important;
border: none;
}
.extend-full,
.extend-left {
padding-left: 3000px;
margin-left: -3000px;
}
.extend-full,
.extend-right {
padding-right: 3000px;
margin-right: -3000px;
}
#warning_banner {
background: #AD2535;
color:white;
text-align: center;
line-height: 30px;
}
#app_content {
background-color: #FFFFFF;
}
#app_approval {
position: relative;
width: 200px;
height: 115px;
z-index: 1;
left: 1755px;
top: 329px;
}
.tiggzi_btn, input.tiggzi_btn, button.tiggzi_btn {
display: inline-block;
position: relative;
top: -1px;
border: 0 none;
border-radius: 3px;
cursor: pointer;
color: white;
font-size: 16px;
line-height: 16px;
text-align: center;
box-shadow: 0 px 0 rgba(0, 0, 0, 0.3), 0 2px 2px -1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
padding: 12px 18px;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
/* Projects page */
#projects_sidebar {
float: left;
}
/* Projects list */
#projects_list_search {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 10px;
border-radius: 3px;
padding: 7px 25px 7px 15px;
background: white url(../img/search-icon.png) no-repeat 98% 50%;
font-size: 16px;
width: 270px;
}
#projects_list_search::-ms-clear {
display: none;
}
.projects-list-item,
.databases-list-item,
.collections-list-item {
padding: 3px;
height: 30px;
border-radius: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
font-size: 16px;
color: #FFF;
border-bottom: 1px solid white;
}
.projects-list-item span.left,
.databases-list-item span.left,
.collections-list-item span.left{
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
line-height: 45px;
}
.projects-list-item:hover span.left,
.databases-list-item:hover span.left,
.collections-list-item:hover span.left {
width: 79%;
}
.projects-list-item span.right,
.databases-list-item span.right,
.collections-list-item span.right{
padding-top: 13px;
padding-right: 10px;
}
.projects-list-item.selected,
.databases-list-item.selected,
.collections-list-item.selected {
color: black;
font-weight: bold;
}
.projects-list-item.selected:hover,
.databases-list-item.selected:hover,
.collections-list-item.selected:hover {
/*color: black;*/
}
.system-collection-selector, .custom-collection-selector {
margin: 0 20px;
}
.system-collection-selector .collections-list-item.selected:hover {
color: black; /* Don't highlight system collection name on mouse hover */
}
.projects-list-item:active,
.databases-list-item:active,
.collections-list-item:active {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) inset;
}
.projects-list-item button,
.databases-list-item button,
.collections-list-item button,
.libs-table button,
.scripts-table button {
display: none;
}
.projects-list-item:last-child,
.databases-list-item:last-child,
.collections-list-item:last-child {
margin-bottom: 0;
}
.collections-list-item:last-child {
border-bottom: none;
}
.projects-list-item:hover,
.databases-list-item:hover,
.collections-list-item:hover,
.scripts-table tr:hover,
.libs-table tr:hover {
color: #95c8aa ;
background-color: #507f63;
}
.projects-list-item:hover button,
.databases-list-item:hover button,
.collections-list-item:hover button,
.libs-table tr:hover button,
.scripts-table tr:hover button {
display: inline-block;
padding: 2px 5px;
font-size: 10px;
font-weight: normal;
}
.projects-list-item img,
.databases-list-item img,
.collections-list-item img{
padding-right: 5px;
float: left;
}
#users-collection-item span:before {
display: inline-block;
content: " ";
width: 23px;
height: 14px;
background: url("../img/users_collection_icon.png") no-repeat left center;
margin-right: 10px;
background-position: 0 0;
}
.selected#users-collection-item span:before {
background-position: 0 -14px;
}
#files-collection-item span:before {
display: inline-block;
content: " ";
width: 14px;
height: 17px;
background: url("../img/files_collection_icon.png") no-repeat left center;
margin-left: 4px;
margin-right: 14px;
background-position: 0 0;
}
.selected#files-collection-item span:before {
background-position: 0 -17px;
}
答案 0 :(得分:0)
我希望clearfix类有溢出:隐藏;但我不知道是否在提供的CSS中。在浏览器上按F12打开开发人员工具,然后使用元素选择器获取项目列表的包含div。然后,您将能够根据类查看应用了哪些样式。然后你就会知道需要改变什么。