CSS 样式列表项返回默认行为

Question

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

First link

Second link

Third link

我的链接是这样并排显示的：

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>

我正在处理位于 div 内标记为 "side-panel" 的链接。

非常感谢！

Answer 1

改用

<ul style="list-style:none">
        <li><a href="#">My Products</a></li>
        <li><a href="#">Sold Items</a></li>
        <li> <a href="#">Messages</a></li>
</ul>

会成功的或者如果你不想使用 li 那么你可以 make<a href="#" style="display:list-item">

Answer 2

看到这个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>

CSS 样式列表项返回默认行为

CSS Styling list item back to default behavior

html

css

html-lists

items

看到这个fiddle