0
在總寬度以下CSS懸空列表項
@media screen and (max-width: 750px) {
.flexbox {
display: block;
}
.menu ul {
padding-right: 7px;
padding-top: 7px;
width: 2140px; /* Should not be a fixed calculated number */
}
.menu ul > li {
box-sizing: border-box;
margin-right: 0;
margin-top: 0;
width: 100px;
float: left;
}
}
的width: 2140px不應該被一個固定的計算出的數字，因爲它可以是不同的。
在總
* {
margin: 0;
padding: 0;
border: 0;
vertical-align: base;
}
#wrapper {
position: relative;
}
header,
footer {
position: absolute;
height: 10%;
width: 100%;
background: beige;
}
footer {
top: 90%;
}
.flexbox {
display: flex;
border: 1px solid;
position: absolute;
width: 90%;
left: 5%;
height: 70%;
top: 15%;
}
.menu {
flex: 1;
overflow-y: auto;
}
.menu ul {
z-index: 3;
list-style-type: none;
}
.menu ul > li {
border: 1px solid black;
background: height: 70px;
margin: 7px;
padding: 7px;
}
main {
flex: 3;
border: 1px solid black;
}
@media screen and (max-width: 750px) {
.flexbox {
display: block;
}
.menu ul {
padding-right: 7px;
padding-top: 7px;
width: 2140px;
/* Should not be a fixed calculated number */
}
.menu ul > li {
box-sizing: border-box;
margin-right: 0;
margin-top: 0;
width: 100px;
float: left;
}
}<div class="wrapper">
<header>
</header>
<div class="flexbox">
<aside class="menu">
<ul>
<li>
<section>
<h3>Section 1</h3>
<p>Text 1</p>
</section>
</li>
<li>
<section>
<h3>Section 2</h3>
<p>Text 2</p>
</section>
</li>
<li>
<section>
<h3>Section 3</h3>
<p>Text 3</p>
</section>
</li>
<li>
<section>
<h3>Section 4</h3>
<p>Text 4</p>
</section>
</li>
<li>
<section>
<h3>Section 5</h3>
<p>Text 5</p>
</section>
</li>
<li>
<section>
<h3>Section 6</h3>
<p>Text 6</p>
</section>
</li>
<li>
<section>
<h3>Section 7</h3>
<p>Text 7</p>
</section>
</li>
<li>
<section>
<h3>Section 8</h3>
<p>Text 8</p>
</section>
</li>
<li>
<section>
<h3>Section 9</h3>
<p>Text 9</p>
</section>
</li>
<li>
<section>
<h3>Section 10</h3>
<p>Text 10</p>
</section>
</li>
<li>
<section>
<h3>Section 11</h3>
<p>Text 11</p>
</section>
</li>
<li>
<section>
<h3>Section 12</h3>
<p>Text 12</p>
</section>
</li>
<li>
<section>
<h3>Section 13</h3>
<p>Text 13</p>
</section>
</li>
<li>
<section>
<h3>Section 14</h3>
<p>Text 14</p>
</section>
</li>
<li>
<section>
<h3>Section 15</h3>
<p>Text 15</p>
</section>
</li>
<li>
<section>
<h3>Section 16</h3>
<p>Text 16</p>
</section>
</li>
<li>
<section>
<h3>Section 17</h3>
<p>Text 17</p>
</section>
</li>
<li>
<section>
<h3>Section 18</h3>
<p>Text 18</p>
</section>
</li>
<li>
<section>
<h3>Section 19</h3>
<p>Text 19</p>
</section>
</li>
<li>
<section>
<h3>Section 20</h3>
<p>Text 20</p>
</section>
</li>
</ul>
</aside>
<main>
<h2>Main</h2>
</main>
</div>
<footer>
</footer>
</div>我測試過display: inline-block和其他的東西，但沒有找到一個解決辦法。
這隻能用CSS來完成嗎？