css - 如何使div和 anchor 以相同的宽度堆叠在一起

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

.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相同和更高的div宽度和高度。我也尝试将其放入表中，仅将其压在一起并取出圆形边缘（CSS显示：.menu中的table和display：锚中的table-cell也不起作用，因为它压扁了它）。这是我其余的代码：http://pastebin.com/ZLS94ZvQ感谢您的帮助！

最佳答案

您应该在以下位置更改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>换行

关于css - 如何使div和 anchor 以相同的宽度堆叠在一起，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14391392/