0

对于我正在制作的网站，我有以下代码：

.menu{      
}

.menu a{
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    color: #d7d7d7;
    font: bold 16px Arial,Helvetica,Sans-serif;
    text-decoration: none;
    border-radius: 10px;
    background-color: #444;
    padding: 5px 10px;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.menu a:hover{
    border: double 6px #00F;
    color: #00F;
    background-color: #FFF;
    font: bold 20px Arial,Helvetica,Sans-serif;
    text-decoration: underline;
    text-align: center;
}

.sidebar{
    width:220px;
    margin-top:8px;
    margin-left:3px;
    background-color:#CCC;
    border-radius:10px;
    padding:10px;
    clear:left;
    -moz-box-shadow: inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px #888;
    box-shadow: inset 0 0 5px 5px #888;
}

.sidebar p{
    text-align: center;
}

HTML 代码：

<div class="sidebar">
    <b style="color:#666;">Menu</b>
    <div class="menu">
        <p><a href="#">Profile</a></p>
        <p><a href="#">Friends</a></p>
        <p><a href="#">Community Service</a></p>
        <p><a href="#">Messages</a></p>
    </div>
</div>

出于某种原因，我可以像这样将锚点放在彼此之上的唯一方法是将它们放在段落标签中，但我不希望那样。这是所有代码外观的图片：

代码概述

我希望菜单看起来像“登录”和“创建帐户”按钮，但 CSS 之间没有区别，唯一可以区分的就是包含它们的 div 位于表格中。所以我想知道我如何才能实现与上面和下面那种相同的宽度和高度的 div。我还尝试将它放入一个表格中，然后将其压扁并取出圆形边缘（CSS display: table in the .menu 和 display: table-cell in the anchor 也不起作用，因为它会压扁它）。这是我的其余代码：http ://pastebin.com/ZLS94ZvQ感谢您的帮助！

4

2 回答 2

3

您应该在以下位置更改您的 HTML：

<div class="sidebar">
  <b style="color:#666;">Menu</b>
  <ul class="menu">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Friends</a></li>
    <li><a href="#">Community Service</a></li>
    <li><a href="#">Messages</a></li>
  </ul>
</div>

和你的CSS：

.menu{      
  list-style:none; /* remove style from <ul> but leave a 40px margin on the left */
  margin-left:-40px; /* this remove the 40px margin on the left */
}
.menu li{
  text-align: center;
  margin: 10px 0; /* this adds 10px top and bottom of each <LI> element */
}
.menu a{
    display: block;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    color:  #d7d7d7; 
    font: bold 16px Arial,Helvetica,Sans-serif;
    text-decoration: none;
    border-radius: 10px;
    background-color: #444;
    padding: 5px 10px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.menu a:hover{
    border: double 6px #00F;
    color: #00F;
    background-color:  #FFF; 
    font: bold 20px Arial,Helvetica,Sans-serif;
    text-decoration: underline;
    text-align: center;
}

.sidebar{
    width:220px;
    margin-top:8px;
    margin-left:3px;
    background-color:#CCC;
    border-radius:10px;
    padding:10px;
    clear:left;
    -moz-box-shadow: inset 0 0 5px 5px #888;
    -webkit-box-shadow: inset 0 0 5px 5px #888;
    box-shadow: inset 0 0 5px 5px #888;
}

使用<ul>更好且语义正确。对于搜索引擎来说，<ul>用<nav>

于 2013-01-18T03:21:09.810 回答
2

你应该考虑使用

<ul>
<li>Your link here</li>
<li>Your link here</li>
<li>Your link here</li>
<li>Your link here</li>
</ul>

列出您的链接。这是最常见的做法。

然后，您可以简单地将li标签设置为display: block;并设置 awidth以拉伸链接，使它们全部均匀。

于 2013-01-18T02:57:48.163 回答