Overflow-x：滚动无法正常工作

Question

我正在尝试创建一个复杂的布局。

它有一个固定的header。两个 div 用于内容，左侧和右侧。左侧 div 应仅垂直滚动。右边的 div 被分成两个 div，分别在上面和下面。右上角 div 只能水平滚动。右下角 div 只能垂直滚动。

出于某种原因，除了我的右上角 div 会水平向上滚动到某个点然后推到下一行之外，一切正常。我需要一双新的眼睛来看待它，因为我已经盯着它看了好几个小时了。

对于可怕的 class 命名约定感到抱歉。

HTML:

   <!DOCTYPE html>
<html>
<head>

  <title>Notebook</title>
  <meta charset="utf-8" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
  <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="js/leftpanel.js"></script>
  <link id="resizeStyle" rel="stylesheet" type="text/css" href="css/home.css">

</head>
<body>




  <div id="leftPanel">    
      <div id="logo">
        <a href="home.html" class="logolink">TITLE</a>
    </div>
    <div id="leftNav">
        <ul id="nav">
          <a href="planner.html">
            <li class="navli">
              Planner
          </li>
      </a>
      <a href="notebook.html">
        <li class="navli">
          Notebook
      </li>
  </a>
  <a href="lessons.html">
    <li class="navli">
      Lessons
  </li>
</a>
<a href="messaging.html">
    <li class="navli">
      Messaging
  </li>
</a>
</ul>
</div>

</div>







<div class="main">






   <div class="header">
     <ul class="title">
       <li id="menuButton">
          <a href="#" id="toggle">
              <img src="images/menu.png" width="30px" height="30px"/>
          </a>
      </li>
      <li id="name">
         TITLE
     </li>
     <li id="action">
         Edit
     </li>  
 </ul>           
</div>

<div class="infobar">
    <div id="date">
      <ul id="dates">
        <li>Today</li>
        <li>Thursday, April 9, 2015</li>
    </ul>
</div>

<div id="calendarView">
  <ul id="calView">
    <li>Day</li>
    <li>Week</li>
    <li>Month</li>
    <li>+</li>
</ul>

</div>
</div>


<div class="content">
    <div class="schedule">
        <div class="col1">
            <div class="foo">

                <table class="day">
                    <tr>
                        <td class="time">12 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>1 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>2 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>3 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>4 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>5 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>6 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>7 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>8 AM</td>
                        <td><span class="selected">Chemistry</span></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><span class="selected">Chemistry</span></td>
                    </tr>
                    <tr>
                        <td>9 AM</td>
                        <td><span class="selected">Chemistry</span></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>10 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>11 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>12 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>1 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>2 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>3 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>4 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>5 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>6 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>7 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>8 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>9 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>10 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>11 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                </table>


            </div>
        </div>

        <div class="rightSide">
            <div class="col3">
                <div class="moo">
                    <ul class="mull">
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                    </ul>
                </div>
            </div>


            <div class="col2">
                <div class="foo">
                    <ul class="full">
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>




</div>








</body>
</html>

CSS:

html, body {
    background-color: #ffffff;
    font-family: 'GothamHTF-Thin';
     height: 100%;
     width: 100%;
    /*min-height: 100%;*/
    /*min-width: 100%;*/
    margin: 0;
    overflow:hidden;

}
.header {
    width: 100%;
    height: 50px;
    background-color: #B5B5B5;
    position: relative;
    z-index: 1000;
}

.infobar {
    width: 100%;
    height: 50px;
    background-color: #d3d3d3;
    position: relative;
    z-index: 1000;
    border-top: 1px solid black;
    border-bottom: 1px solid black;

}

.content {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 50px 15px 50px 15px;
    margin: -50px auto -50px auto;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-color: #ffffff;
}

.schedule {
    height: 100%;
    width: 100%;
}

.col1, .col2, .col3 {
    padding:0;
    margin:0;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.col1 {
    width: 50%;
    background-color: #ffffff;
    height: 100%;
    border-right: 1px solid black;
    float: left;
}
.col2 {
    width: 100%;
    background-color: #ffffff;
    height: 50%;
}
.col3 {
    background-color: #ffffff;
    width: 100%;
    height: 150px;
}

.rightSide {
    width: 50%;
    float: left;
    height: 100%;
}


.foo {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

.moo {
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}
ul.mull {
    width:100% !important;
    height:150px !important;
    display: inline;
}

ul.mull li {
    display: inline-table;
}

table.day{
    border-collapse: collapse;
    border-spacing: 0;
    width:100%;
    height:100%;
    margin:50px 0 0 0;
    padding:0px;
}
.day tr:nth-child(odd){ 
    background-color:#ffffff; 
}

.day tr:nth-child(even)    { 
    background-color:#ffffff; 
}
.day td{
    vertical-align: top !important;

    border:1px solid #d5d5d5;
    border-width:0px 0px 0px 0px;
    text-align:left;
    font-size:10px;
    font-family:Arial;
    font-weight:normal;
    color:#000000;
    height: 60px;
    top: 0;
}
.day tr:last-child td{
    border-width:0px 0px 0px 0px;
}
.day tr td:last-child{
    border-width:0px 0px 1px 0px;
}
.daytr:last-child td:last-child{
    border-width:0px 0px 0px 0px;
}

.day tr:first-child td:first-child{
    border-width:0px 0px 0px 0px;
}
.day tr:first-child td:last-child{
    border-width:1px 0px 1px 0px;
}



.selected {
    background-color: #747474; color: #ffffff; width: 100%; float: left; height: 100%;
    padding: 0;
    margin: 0;
}



a {
    color: #fff;
    text-decoration: none;



}

a:hover {
    color: #424042;




}

li.active {
    color: #424042;








}

.main {

    float: left;
    height: 100%;
    width: 100%;

}

.mainactive {
    float: left;
    width: 75%;


}


#leftPanel {
    background-color: #535353;
    float: left;
    width: 25%;
    text-align: center;
    color: #fff;
    height: 100%;
    display: none;


}

#logo {
    background-color: #424042;
    font-size: 2.0em;
    top: 5;
    height: 100px;
}

a.logolink:hover{
    color:#fff !important; 
    display:block;
}

a.logolink {
    display:block;
    padding-top: 25px;
}

#leftNav {
    top: 5%;

}
ul#nav {
    padding: 10% 0 0 0; 
}

ul#nav a {
    font-size: 1.4em;
}

#nav li {

}

li.navli {
    list-style-type: none;
    padding: 5% 0px 5% 0px;
    border-top: 1px solid #5E5B5E;
    border-bottom: 1px solid #5E5B5E;
}
li.active {
    list-style-type: none;
    padding: 5% 0px 5% 0px;
    border-top: 1px solid #5E5B5E;
    border-bottom: 1px solid #5E5B5E;
}


a#toggle {
    color: #000;
    padding-top: 0px;
}


.title li{
    display: inline-block;
    width: 32%;
    overflow: auto;
    height: 60px;
    padding-top: 10px;

}
ul.title {
    margin: 0 auto;
    padding: 0px;
    overflow: auto;
    top: 0;
}
#action {
    text-align: right;
    font-size: 1.6em;
    right: 0;
}

#menuButton {
    text-align: left;
}

#name {
    text-align: center;
    font-size: 2.0em;
    font-weight: bolder;
}

ul#dates {
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

ul#dates li {
    display: inline;
}




#date {
    float: left;
    width: 50%;
}

ul#calView {
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

ul#calView li {
    display: inline;

}

#calendarView {
    text-align: right;

}



.time {

    width: 30px;
    padding-right: 20px;

}

还有 JS，以防出现错误：

$(function(){ // DOM READY shorthand

    $("#leftPanel").hide();
    $("#toggle").click(function(e){
        // e.preventDefault(); // If you use anchors

        $("#leftPanel").toggle(),
        $(".main").toggleClass("mainactive");
    });

});

jsfiddle

如您所见，右上角 div 水平滚动了一秒钟，然后换行，尽管我不希望这样。我很确定它与花车有关，但我无法提前计算它out.Thanks。

Answer 1

对于 ul 元素 where class=mull <ul class="mull">

添加 display: flex 或 display:inline-flex 应该可以解决问题。

将您的 css 更改为

 ul.mull {
        width:100% !important;
        height:150px !important;
        display: flex;
    }

在这里工作 JSFiddle https://jsfiddle.net/unckcfb4/2/

Overflow-x：滚动无法正常工作

Overflow-x: scroll not working correctly

html

css

scroll

overflow