如何讓我的鏈接列表按從上到下的順序顯示，而不是從右到左？

如何讓鏈接列表從上到下出現，而不是從左到右？我試過html間距（）等等。這不是專業，所以我來這裏問如何做到這一點。如何讓我的鏈接列表按從上到下的順序顯示，而不是從右到左？

<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> 
 
\t </body>

來源

2016-12-16 NumaNuma

從你的'li'裏刪除'float：left' –

li {float：left;} 刪除這個 –

謝謝。問題解決了。 – NumaNuma

只是刪除樣式

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>

來源

2016-12-16 06:41:26

這是你需要什麼？

body { 
 
\t margin: 0; 
 
\t font-family: "Yu Gothic", sans-serif; 
 
\t transition: background-color .5s; 
 
    background-color: (0, 0, 0, 0.5); 
 
\t background-image: url(image url here); 
 
\t text-align: left; 
 
} 
 
ul { 
 
\t list-style-type: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t overflow: hidden; 
 
\t background-color: #000000; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t width: 278px; 
 
\t height: 100%; 
 
} 
 
li { 
 
\t display: block; 
 
} 
 
li a { 
 
\t display: block; 
 
\t color: white; 
 
\t padding: 16px; 
 
\t text-decoration: none; 
 
} 
 
.main { 
 
\t padding: 16px; 
 
\t margin-top: 30px; 
 
\t 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>

來源

2016-12-16 06:15:15

如何讓我的鏈接列表按從上到下的順序顯示，而不是從右到左？

回答

相關問題