I am having trouble with the alignment of my links. They are currently displayed in a horizontal manner instead of vertically like this:
- First link
- Second link
- Third link
The current layout shows the links next to each other as follows:
First link Second link Third link.
* {
margin: 0;
padding: 0;
}
h2 {
float: left;
font-size: 17px;
font-weight: 500;
}
a {
color: #15c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body {
background: #fff;
font: 12px Arial, Helvetica, Verdana, sans-serif;
color:#000;
margin:0;
}
header {
width: auto;
height: 60px;
min-width: 980px;
padding: 0 30px 0 15px;
background-color: #fafafa;
}
header ul {
float: right;
list-style: none;
}
header ul li {
float: left;
color: #8c8989;
line-height: 60px;
margin-left: 20px;
}
header ul li a {
color: #8c8989;
}
.logo {
float: left;
width: 125px;
height: 36px;
margin: 12px 30px 0 0;
background-color: #fff;
}
.add-product {
color: #fff;
width: 70px;
height: 28px;
font-size: 15px;
margin-top: 14px;
line-height: 28px;
border-radius: 2px;
text-align: center;
cursor: pointer;
background-color: #EA4335;
}
.add-product:hover {
background-color: #32ba55;
}
.add-product a {
color: #fff;
text-decoration: none;
}
.add-product a:visited {
color: #fff;
}
.search-box {
float: left;
width: 450px;
height: 32px;
border: 1px solid #d7d7d7;
margin-top: 12px;
padding-left: 15px;
border-right: none;
border-radius: none;
}
.inner-header {
width: 100%;
height: 60px;
border-bottom: 1px solid #ebebeb;
}
.side-panel {
float: left;
width: 188px;
height: auto;
background-color: red;
}
.side-panel ul {
float: left;
}
.side-panel ul li {
margin: 5px 0 5px 0;
}
.side-panel ul li a {
color: #fff;
}<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Project | Seller Central</title>
<link rel="stylesheet" type="text/css" href="styles/seller-central.css">
</head>
<body>
<header>
<a href="?q=home">
<div class="logo"></div>
</a>
<ul>
<li>
Hi, Guest
</li>
<li>
<div class="add-product"><a href="#">Add +</a></div>
</li>
</ul>
</header>
<div class="inner-header"></div>
<div class="side-panel">
<ul>
<li>
<a href="#">My Products</a>
<a href="#">Sold Items</a>
<a href="#">Messages</a>
</li>
</ul>
</div>
</body>
</html>I am focusing on adjusting the links within the "side-panel" div for better display.
Your assistance is greatly appreciated!