HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a menu:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;}
li {
float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;}
li a:hover {
background-color: #111111;}</style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;}
li {
float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;}
li a:hover {
background-color: #111111;}</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Keterangan :
list-style-type: none; -> Menghilangkan bulatan dari listfloat: right; -> untuk ke kiri atau ke kanan
overflow -> kalau text kepanjangan maka disetting fixed atau ada scroll, agar lebih paham cek disini
display: block; -> Menampilkan text secara block, agar lebih paham cek disini
text-decoration: none; -> Menghilangkan garis bawah link
Tidak ada komentar:
Posting Komentar