html - 自动移动菜单以有效利用空间？

Question

我正在尝试制作一个设备友好的网站版本，但我在菜单方面遇到了一些问题。我很难在不滚动的情况下将其全部显示在 iPad 屏幕上，但如果菜单自动向上移动以填充空白区域，它会有所帮助。

蓝色区域是菜单，黑色区域是浪费的空间。有什么方法可以让我的菜单上移到上面菜单的底部吗？

HTML

<ul><t2>Home</t2>

        </ul>



        <ul><t2>Academic Life</t2>
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul>



        <ul><t2>A Catholic Education</t2>
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul>



        <ul><t2>Sporting & Co-Curricular</t2>
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul>



        <ul><t2>Music & The Arts</t2>
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul>



        <ul><t2>Sixth Form</t2>
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul>



        <ul><t2>Information</t2>
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul>



        <ul><t2>News</t2>

        </ul>



        <ul><t2>Events</t2>

        </ul>

CSS -

body {
    background-color: #000;
}

ul {
    list-style-type: none;
    width: 48%;
    min-width: 460px;
    padding: 0;
    background-color: blue;
    font-family: Gill Sans MT;
    color: #fff;
    display: inline;
    float: left;
    font-size: 40px;
    position: relative;
}

t2 {
    font-size: 100%;
}

li {
    font-size: 80%;
    padding-left: 3%;
}

@media all and (orientation:landscape) {

    ul {
        width: 32%;
        min-width: 300px;
        font-size: 30px;
    }

    .menuicon {
        width: 100px;
    }

    #menu {
        padding-top: 105px;
    }
} 

任何帮助将不胜感激!谢谢。

Answer 1

现在正确嵌套，空格是因为它们是单独的列表，将 t2 更改为 h2，这就是我想你的意思，我可能是错的，但我从来没有听说过 t 标签，如果我我错了，我记得我在 1982 年有一次关于我当时女朋友的猫的名字，然后将 css h2 更改为 t2 并将 html 标签更改回来。除此之外没有接触过CSS

body {
    background-color: #000;
}

ul {
    list-style-type: none;
    width: 48%;
    min-width: 460px;
    padding: 0;
    background-color: blue;
    font-family: Gill Sans MT;
    color: #fff;
    display: inline;
    float: left;
    font-size: 40px;
    position: relative;
}

h2 {
    font-size: 100%;
}

li {
    font-size: 80%;
    padding-left: 3%;
}

@media all and (orientation:landscape) {

    ul {
        width: 32%;
        min-width: 300px;
        font-size: 30px;
    }

    .

<ul>
	  <li>
        <h2>
		  Home
	    </h2>
      </li>
	<li>
		<ul>
			<li>
				<h2>
					Academic Life
				</h2>
			</li>
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul>
       </li>
	   <li>
			<ul>
				<li>
					<h2>A Catholic Education</h2>
				</li>
				<li>Test 1</li>
				<li>Test 2</li>
				<li>Test 3</li>
				<li>Test 4</li>
			</ul>
        </li>
		<li>
			<ul>
				<li>
					<h2>Sporting & Co-Curricular</h2>
				</li>
				<li>Test 1</li>
				<li>Test 2</li>
				<li>Test 3</li>
				<li>Test 4</li>
			</ul>
		</li>
		<li>
			<ul>
				<li>
					<h2>Music & The Arts</h2>
				</li>
				<li>Test 1</li>
				<li>Test 2</li>
				<li>Test 3</li>
				<li>Test 4</li>
			</ul>



        </li><li><ul><li><h2>Sixth Form</h2></li>
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul>



        </li><li><ul><li><h2>Information</h2></li>
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul>



        </li>
        <li>
          <ul>
            <li><h2>News</h2></li>

          </ul>



        </li>
  <li><ul><li><h2>Events</h2></li>

        </ul>
    </ul>