Html 是什么导致出现水平滚动条

我通过以下三个分区控制我的网站的每个页面（8-12页）的布局：

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

HTML





员额计数

---

我看不出这段代码中有任何问题，但您可以添加

overflow-x:hidden以禁用水平滚动条

body{
    overflow-x:hidden;
}

你能添加一些相关的HTML吗？首先我不喜欢你的方法，其次我怀疑你没有重置浏览器默认值。我想问你为什么要将.left、.right设置为两个float:left；？这对我来说没什么意义。为什么你想让它们都向左浮动？在出现问题的页面上添加所有html，我们可以帮助你。除此之外，我们不能。添加溢出：隐藏到具有滚动条的容器div将隐藏它。感谢您的建议。我确实发现了问题。最右边的div中的li元素延伸到div之外，因此出现了溢出的滚动条。这是一个合乎逻辑的答案，但在我的帖子中并不明显，因为我没有包含那些li元素的css。