Question

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

.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 code：

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

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

Code Overview

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

Answer 1

你应该考虑使用

<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;，然后设置width即可延长链接，使其均匀。

Answer 2

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

包装起来应该更好

如何使用相同的宽度将div和锚堆叠在一起

2 个答案: