CSS样式列表项恢复默认行为[关闭]

Question

我需要我的链接像这样重叠显示：

1. 第一个链接
2. 第二个链接
3. 第三个链接

我的链接彼此相邻，如下所示：

第一个链接 第二个链接 第三个链接。

* {
    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>

我正在处理标有“侧面板”的 div 内的链接。

非常感谢！

Answer 1

看到这个fiddle

这种行为是因为所有菜单项都在一个 <li> 中。将它们分成 3 个<li>s，你会得到你想要的..

查看下面更新的 HTML

HTML

<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>
    </li>
    <li>
      <a href="#">Sold Items</a>
    </li>
    <li>
      <a href="#">Messages</a>
    </li>
  </ul>
</div>