Question

我需要将我的链接显示在彼此之上：

第一个链接

第二个链接

第三个链接

我的链接彼此相邻：

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

我正在处理标有＆＃34; side-panel＆＃34;的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>

Answer 2

使用

x*y

它会成功或者，如果您不想使用li，则可以<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>＆gt;

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

2 个答案:

请参阅此fiddle