小贝子编程

Flexbox CSS3 LI菜单(NAV.TREEHOUSE)CSS成立不起作用和溢出.在框架中确定



我试图从帧更改为flexbox。我的主要问题是我有一个复杂的CSS3驱动的LI菜单。在一列中，我看到了我的命令，但它们失去了所有格式，它们溢出。
我不是程序员，而是教师学习，然后使用我学到的东西来帮助他人。我在这里展示的是我的圣经录取系统，但所有其他非合理的教育范围"注释系统"都使用相同的结构。这完全可以在框架中工作。但是我一直听到它们不再是HTML的一部分。这永远不会在线上运行。它供学生在平板电脑/上网本上使用。它在Linux，Mac，BSD，Windows，Android(没有iPad进行测试(中运行。

我确实有一个网页，您可以在其中看到它在框架中的工作方式。www.neocities.loyalstreehouse.net此页面用于帮助学生完成课堂作业。IVE缩短了菜单，因为它很长(带有子菜单的A-Z菜单(试图使用滚动条，但仍然丢失了流量和CSS格式。

enter code here 

<style type="text/css">
`.row1 {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  min-height: calc(70vh); /* set min container height to viewport height */
}
.row2 {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  min-height: calc(30vh); /* set min container height to viewport height */
  overflow: hidden;
}

.col-1 {
  flex: 0 1 28%;
  background: beige;
  border: 1px solid black;
  font-size: 2em;
  padding: 4px;
  overflow: hidden;
  box-sizing: border-box;
}
.col-2 {
  flex: 0 1 16%;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-left: auto;
  background: ;
  border: 1px solid black;
  padding: 4px;  
  text-overflow: ellipsis;
  max-height: 70%;
  overflow: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
}
.col-3 {
  flex: 0 1 24%;
  background: beige;
  border: 1px solid black;
  padding: 4px;
  overflow: hidden;
  box-sizing: border-box;
}
.col-4 {
  flex: 0 1 6%;
  margin-left: auto;
  background: #eee;
  border: 1px solid black;
  padding: 4px;
  overflow: hidden;
  box-sizing: border-box;
}
body { margin: 0; }

.flex-fill {
  -webkit-flex: 0 1 auto;
  -moz-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}
.flex-fixed {
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
.lhs {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 300px;
  max-height: 200px;
  border: 1px solid red;
  overflow: hidden;
}
.list-container {
    overflow-y: scroll;
}
nav.treehouse ul
{   padding: 0px;
    margin: 0px 0px 0px 0px;
    list-style: none;}
nav.treehouse li
{   padding: 0px;
    margin: 4px 0px 0px 0px;
    list-style: none;
    font-family: arial, Sans-serif;
    font-size: 16pt;}
nav.treehouse li label
{   padding: 12px;
    margin: 6px 0px 0px 0px;
    list-style: none;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    color: white;
    font-family: arial, Sans-serif;
    font-weight: bold;
    font-size: 16pt;}
nav.treehouse a:hover
{   text-decoration: underline;}
nav.treehouse input
{   position: absolute;
    opacity: 0;}
nav.treehouse input + label + ul
{   margin: 0px 0px 0px 0px;
    display: none;}
nav.treehouse input:checked:not(:disabled) + label + ul
{   display: block;}
nav.treehouse label::before
{   cursor: pointer;
    display: inline-block;
    height: 16px;
    line-height: 16px;,
    vertical-align: middle;
    width: 5px;
    margin: 0px 0px 0px 0px;
    background-position: 0 -32px;}
nav.treehouse input:checked + label::before
{   background-position: 0 -16px;}

li.en24-N
{  color: black;
    font-family: arial, Sans-serif;
    font-size: 24pt;}
    p
{   color: black;
    font-family: arial, Sans-serif;
    font-size: 12pt;}
</style>
</head>
<body>



<section class="row1">
    <div class="col-1" id="file-A">file-A</div>
    <div class="col-1" id="file-B">file-B</div>
    <div class="col-1" id="file-C">file-C</div>
    <nav class="col-2">
    <ul>
<li><input type="checkbox" id="item-00-01" /><label for="item-00-01" class="green1"><span xml:lang="en" lang="en">Notes</span></label>
    <ul>            
    <li><input type="checkbox" id="item-01-01" /><label for="item-01-01"  class="green2"><span xml:lang="en" lang="en"> AE-eng </span></label>    
    <ul>    
    <li><a href="AE-eng__loy/_0_AE-eng__idx/AE-eng__indx-A.html" target="index-A" class="green8"> A </a>  
    <a href="AE-eng__loy/_0_AE-eng__idx/AE-eng__indx-B.html" target="index-B" class="green8"> B </a>
    <a href="AE-eng__loy/_0_AE-eng__idx/AE-eng__indx-C.html" target="index-C" class="green8"> C </a>    
    </li></ul>
    </li><li><input type="checkbox" id="item-01-02" /><label for="item-01-02"  class="green2"><span xml:lang="en" lang="en"> AE-tha </span></label>   
    <ul>
    <li><a href="AE-tha__loy/_0_AE-tha__idx/AE-tha__indx-A.html" target="index-A" class="green8"> A </a> 
    <a href="AE-tha__loy/_0_AE-tha__idx/AE-tha__indx-B.html" target="index-B" class="green8"> B </a> 
    <a href="AE-tha__loy/_0_AE-tha__idx/AE-tha__indx-C.html" target="index-C" class="green8"> C </a> 
    </li></ul>
    </li><li><input type="checkbox" id="item-01-03" /><label for="item-01-03"  class="green2"><span xml:lang="en" lang="en"> Inspire </span></label>      
    <ul>    
    <li><a href="AI__loy/_0_AI-eng__idx/AI-eng__indx-A.html" target="index-A" class="green8"> A </a>
    <a href="AI__loy/_0_AI-eng__idx/AI-eng__indx-B.html" target="index-B" class="green8"> B </a>    
    <a href="AI__loy/_0_AI-eng__idx/AI-eng__indx-C.html" target="index-C" class="green8"> C </a>    
    </li></ul>
    </li><li><input type="checkbox" id="item-01-04" /><label for="item-01-04"  class="green3"><span xml:lang="en" lang="en"> Journal </span></label>      
    <ul>
    <li><a href="AJ__loy/_0_AJ-eng__idx/AJ-eng__indx-A.html" target="index-A" class="green8"> A </a> 
     <a href="AJ__loy/_0_AJ-eng__idx/AJ-eng__indx-B.html" target="index-B" class="green8"> B </a> 
     <a href="AJ__loy/_0_AJ-eng__idx/AJ-eng__indx-C.html" target="index-C" class="green8"> C </a> 
     </li></ul>
    </li><li><input type="checkbox" id="item-01-05" /><label for="item-01-05"  class="green3"><span xml:lang="en" lang="en"> Notes </span></label>    
    <ul>
     <li><a href="AN__loy/_0_AN-eng__idx/AN-eng__indx-A.html" target="index-A" class="green8"> A </a> 
     <a href="AN__loy/_0_AN-eng__idx/AN-eng__indx-B.html" target="index-B" class="green8"> B </a> 
     <a href="AN__loy/_0_AN-eng__idx/AN-eng__indx-C.html" target="index-C" class="green8"> C </a> 
     </li></ul>
    </li><li><input type="checkbox" id="item-01-06" /><label for="item-01-06"  class="green3"><span xml:lang="en" lang="en"> Quest </span></label>    
    <ul>
     <li><a href="AQ__loy/0_AQ-eng__idx/AQ-eng__2018__indx-A.html" target="index-A" class="green8"> A </a> 
     <a href="AQ__loy/0_AQ-eng__idx/AQ-eng__2018__indx-B.html" target="index-B" class="green8"> B </a>
     <a href="AQ__loy/0_AQ-eng__idx/AQ-eng__2018__indx-C.html" target="index-C" class="green8"> C </a> 
    </li>
    </ul>       
    <!-- INSERT  MORE A -->
    </li></ul>
   </div>
  </section>
<section class="row2">
    <div class="col-3" id="index-A">index-A</div>
    <div class="col-4" id="menu-A">menu-A</div>
    <div class="col-3" id="index-B">index-B</div>
    <div class="col-4" id="menu-B">menu-B</div>
    <div class="col-3" id="index-C">index-C</div>
    <div class="col-4" id="menu-C">menu-C</div>
    <div class="col-2" id="second-menu-A">secondary-menu</div>
  </section>

我发现您可以在flexbox中使用iframe。(我认为这是框架的一部分，因此认为它是不可接受的代码。但是现在菜单不喜欢格式化。但是仍然没有弄清楚为什么如果iframe在第一行中，第二个flexbox行消失了。如果我将iframe放入第二行第一行返回。页面有两个flexbox行。现在，我正在搜索iframne和flexbox，以查看是否有人解决了此问题。如果您有答复。我将其发布为另一个问题。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium