是什么原因导致水平滚动条显示

我控制我的网站的每个页面的布局（8-12页）以下三个div的：是什么原因导致水平滚动条显示

.left, .right{ 

width:25%; 
height:2300px; 
float:left; 
} 

.left { 
clear:both; 
} 

.middle { 
width:50%; 
height:2300px; 
float:left; 
}

这工作成功地保持内的所有我的HTML的水平布局，除了出现水平滚动条的页面之外，我可以滚动到最左边的div之外。我没有任何元素，隐藏或以其他方式，超出最左边的div，所以我不知道我应该看什么来解决这个问题。

HTML 
<div class="left"> 
<img class="number" id="number5" src="images/number5.jpg" data-number=4 /> 
<div id="controls"> 
<p class="pagechange" id="previous" data=-1><img src="images/pagebutton_prev.jpg" height="50" width="30" /></p> 
    <div id="postbutton"> 
    <img id="postcomment" src="../mazihealth/My Images/PostComment_icon.jpg" height="50" width="100"/> 
    </div> 
<p class="pagechange" id="next" data=1><img src="images/pagebutton.jpg" height="50" width="30"/></p> 
</div> 
</div> 
<div class="middle"> 
<div class="filterjq"> 

<div id="filterjq-show"> 
    <img class="number" id="number1" src="images/number1.jpg" data-number=0 /> 
    <ul> 
    <li class="show" id="allposts" data="%">All Posts</li> 
    <li class="show" id="user" data="<?php echo $_SESSION['Userid']; ?>">My Posts</li> 
    <li class="show" id="follow" data="follow">Following</li> 
    </ul> 
</div> 

<div id="filterjq-species"> 
    <img class="number" id="number2" src="images/number2.jpg" data-number=1 /> 
    <ul> 
     <li class="species" id="Dog" data="Dog"><img src="../mazihealth/My Images/dog icon.jpeg" /></li> 
     <li class="species" id="Cat" data="Cat"><img src="../mazihealth/My Images/cat icon.jpeg" /></li> 
     <li class="species" id="allspecies" data="%" ><img src="../mazihealth/My Images/dog_and_cat_icon.jpg" /></li> 
     <li class="species" id="breed" data-breed="<?php echo $_SESSION['Breed']; ?>"><img src="../mazihealth/My Images/aussie.jpg" /></li> 
    </ul> 
</div> 

<div id="filterjq-medcond"> 
    <img class="number" id="number3" src="images/number3.jpg" data-number=2 /> 
    <ul> 
     <li class="medcond" id="allmedcond" data="%">All</li> 
     <li class="medcond" id="Arthritis" data="Arthritis">Arthritis</li> 
     <li class="medcond" id="Cancer" data="Cancer">Cancer</li> 
     <li class="medcond" id="Cardiac" data="Cardiac Respiratory">Cardiac</li> 
     <li class="medcond" id="Diabetes" data="Diabetes">Diabetes</li> 
     <li class="medcond" id="Obesity" data="Obesity">Obesity</li> 
     <li class="medcond" id="Other" data="Other">Other</li> 
    </ul> 
</div> 
<div class="divider"></div> 
</div> 


<!--=================this is a dynamic table --> 
<table id="table2"> 
<tr><img class="number" id="number4" src="images/number4.jpg" data-number=3 /></tr> 
    <tbody> 
    <tr> 
     <td class="post"></td> 
    </tr> 
    </tbody> 
</table> 
</div> 

<div class="right"> 
    <div id="dialog" title="Forum Tips"></div> 
    <p>Now Showing:</p> 
    <img id="breedimage" src="" /> 
    <p id="breedname"><?php echo $_SESSION['Breed']; ?></p><p id="newmedcond"></p> 

<!-- another dynamic table --> 
<div id="medcond-count"> 
<h2> Post Count </h2> 
<ul id="tally"> 
    <li></li> 
</ul>

来源

2013-10-12 user2232681

你可以添加一些相关的HTML吗？ –

首先，我并不喜欢你的方法，其次我怀疑你没有重置浏览器的默认设置 –

请问你为什么要设置.left，.right和float：left;？这对我来说毫无意义。你为什么要让他们两个都向左浮动？ – PatchGuru

我看不出有什么问题，在此代码，但您可以添加overflow-x:hidden;禁用水平滚动条。

body{ 
    overflow-x:hidden; 
}

来源

2013-10-12 05:32:33

感谢您的建议。我确实发现了这个问题。最右边div中的li元素扩展到div之外，因此溢出的滚动条。这是一个合乎逻辑的答案，但它在我的文章中并不明显，因为我没有包含那些元素的CSS。 – user2232681

是什么原因导致水平滚动条显示

回答

相关问题