Question

如何让链接列表从上到下显示，而不是从左到右？我试过html spacing（）等。它不是那么专业，所以我来这里问如何做到这一点。

   <style>
body {
margin: 0;
font-family: "Yu Gothic", sans-serif;
transition: background-color .5s;
background-color: (0, 0, 0, 0.5);
background-image:url(image url here);
text-align: left;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
position: fixed;
top: 0;
width: 278px;
height: 100%;
}

li {
float: left;
}

li a {
display: block;
color: white;
padding: 16px;
text-decoration: none;
}

.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
</style>
</head>
<body>

<ul>
<li><a href="#main"><img src="image url here" width="240 height="128"></a></li>
<li><a href="#home">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
	</body>

Answer 1

这是你需要的吗？

body {
	margin: 0;
	font-family: "Yu Gothic", sans-serif;
	transition: background-color .5s;
    background-color: (0, 0, 0, 0.5);
	background-image: url(image url here);
	text-align: left;
}
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #000000;
	position: fixed;
	top: 0;
	width: 278px;
	height: 100%;
}
li {
	display: block;
}
li a {
	display: block;
	color: white;
	padding: 16px;
	text-decoration: none;
}
.main {
	padding: 16px;
	margin-top: 30px;
	height: 1500px; /* Used in this example to enable scrolling */
}

<ul>
  <li><a href="#main"><img src="image url here" width="240 height="128"></a></li>
  <li><a href="#home">News</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

Answer 2

只需删除样式

li {
 float: left;
}

它运作正常

<style>
body {
margin: 0;
font-family: "Yu Gothic", sans-serif;
transition: background-color .5s;
background-color: (0, 0, 0, 0.5);
background-image:url(image url here);
text-align: left;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
position: fixed;
top: 0;
width: 278px;
height: 100%;
}

li a {
display: block;
color: white;
padding: 16px;
text-decoration: none;
}

.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
</style>
<body>

<ul>
<li><a href="#main"><img src="image url here" width="240 height="128"/></a></li>
<li><a href="#home">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

如何使我的链接列表从上到下依次显示，而不是从右到左？

2 个答案: